PhoneGap 


构建 路 平台 APP 


HTML 5+PhoneGap 移 动 应 用 实战 


SFreeandOpen 
source:Framework 


G:zSeriouslycross-platform 
with-FEEME: CSS,JavaScript 


©:Wirite:less; :Do:more 


@ 小 例子 多 ， 不 讲究 很 深 的 理论 ， 只 要 求 快速 上 手 潘 中 强 曹 地 编著 
9 技术 新 ， 使 用 HTML 5 和 PhoneGap 3， 移 动 APP 要 用 最 新 最 快 的 技术 

总 跨 平台 ， 结合 HTML 5 和 PhoneGap 本 身 的 特色 ， 贯穿 全 书 讲解 跨 平 台 开 发 

强调 人 机 交互 的 重要 性 ， 使 读者 在 学 习 技 术 的 同时 获得 思维 上 的 启发 


县 示例 项 目 源 代码 少 绕 大 学 测 版 往 
/月 | 


构建 跨 平台 APP 


HTML5+PhoneGap 移 动 应 用 实战 


清华 大 学 出 版 社 
北京 


内 容 简 介 


PhoneGap 的 目的 是 用 来 快速 开发 移动 跨 平台 APP， 它 基于 HTML 5， 支 持 市 面 上 流行 的 移动 设备 ， 本 书 
的 特色 就 是 快速 学 习 如 何 利用 HTML 5 和 PhoneGap 开发 移动 APP。 

本 书 分 为 三 篇 ， 第 一 篇 介绍 HTML 5 为 移动 页 面 设计 的 一 些 新 元 素 ， 包 含 移动 开发 的 大 背景 、 移 动 布局 、 
地 理 位 置 、Web 存储 、 多 媒体 等 等 ， 第 二 篇 介绍 PhondeGap 辅助 HTML 5 开发 应 用 的 一 些 API， 包 含 事件 处 
理 、 信 息 处 理 、 加 速度 、 地 理 位 置 、 指 南 针 、 本 地 存储 和 多 媒体 等 等 ， 最 后 一 篇 通过 两 个 实例 , 介绍 了 HTML 
5+PhoneGap 开发 移动 APP 的 两 个 项 目 开发 流程 和 实现 代码 。 

本 书 适 合 有 一 定 HTML+CSS+JavaScript 网 页 开发 基础 的 人 员 ， 可 作为 培训 教材 使 用 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 《CIP) 数据 


构建 跨 平台 APP: HTML 5+PhoneGap 移动 应 用 实战 / 潘 中 强 ， 曹 卉 编著 . - 北京 : 清华 大 学 出 版 社 ，2015 
ISBN 978-7-302-41457-5 


I. @ 构 … I @ 潘 … @ 曹 … II @ 移 动 电话 机 一 应 用 程序 一 程序 设计 IV. DTN929.53 


中 国 版 本 图 书馆 CIP 数据 核 字 (2015) 第 206205 号 


责任 编辑 : 夏 非 彼 
封面 设计 : 王 翔 
责任 校对 : 闫 秀 华 
责任 印 制 : 杨 艳 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn，http://www.wqbook.com 
地  ” 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮  ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015，zhiliang@tup.tsinghua.edu.cn 


: 北京 蚀 海 金 澳 胶 印 有 限 公司 

: 全 国 新 华 书店 

190mmx260mm 印 张 : 22 字 数 : 563 千 字 

: 2015 年 10 月 第 1 版 印 次 : 2015 年 10 月 第 1 次 印刷 
1~3000 

55.00 元 


守 潍 汽 计 芝 训 


产品 编号 : 064414-01 


前 言 


PhoneGap 是 一 个 创建 跨 平台 移动 应 用 程序 的 快速 开发 平台 , 它 基 于 HTML 5。 因为 HTML 
5 不 能 调用 移动 设备 的 底层 功能 ,所 以 PhoneGap et iPhone、Android、 
Windows Phone 和 Blackberry 智能 手机 的 核心 功能 
指南 针 和 振动 等 等 。PhoneGap 的 这 些 功能 与 HTML 5 实现 了 互补 记忆 中 小 型 企业 开始 利用 
它们 进行 混合 式 移动 开发 ， 这 也 是 本 书 的 由 来 。 

本 书 旨 在 帮助 个 人 或 中 小 型 企业 快速 开发 属于 自己 的 APP， 尤 其 是 这 些 APP 能 在 所 有 设 
备 上 兼容 ， 即 减少 了 开发 成 本 ， 也 减少 了 各 移动 设备 的 重复 开发 成 本 。 


本 书 的 特点 


本 书 的 重点 是 支持 学 习 人 员 快 速 开 发 Web APP， 主 要 具备 如 下 特色 : 

@ 详细 介绍 HTML 5 在 移动 使 用 的 各 种 元 素 ， 如 移动 布局 、 地 理 位 置 、 多 媒体 、Web 存 
储 等 ， 为 开发 Web 版 移动 页 面 打下 基础 。 

@ 详细 介绍 PhoneGap 提供 的 一 些 调用 手机 核心 功能 的 API， 如 加 速度 、 指 南 针 、 地 理 位 
置 、 信 息 、 电 话 簿 等 ， 为 开发 兼容 所 有 设备 的 Web APP 打下 基础 。 

@ 本 书 重 在 应 用 ， 对 于 技术 语法 的 使 用 和 技巧 ， 都 穿插 在 实际 APP 的 开发 实例 中 。 

@ 本 书 以 安 草 和 iOS 设备 为 主要 开发 环境 让 读者 能 最 先 熟 愁 这 两 个 最 流行 的 移动 平台 。 

@ 本 书 提供 所 有 案例 测试 代码 和 效果 ， 带 助 读者 在 解决 不 了 问题 的 时 候 可 以 通过 对 比 源 
码 来 找到 问题 。 


本 书 的 内 容 


本 书 提供 了 完整 的 HTML 5+PhoneGap 学 习 路 线 ， 全 书 安排 如 下 : 

第 1 章 是 HTML 5 移动 开发 的 大 背景 ， 主 要 是 讲解 HTML 5 的 发 展 、 开 发 环境 和 调试 环 
境 ， 其 中 还 会 帮助 读者 创建 自己 的 第 一 个 HTML 5 移动 页 面 ， 最 后 还 会 介绍 HTML 5 与 
PhoneGap 的 关系 。 

第 2 章 是 HTML 5 的 页 面 元 素 ， 这 些 元 素 用 来 显示 页 面 的 内 容 与 交互 ， 可 以 让 我 们 了 解 
HTML 5 中 的 元 素 在 移动 网 页 下 的 使 用 方法 。 

第 3 章 是 HTML 5 的 移动 布局 ， 这 些 布局 要 依靠 CSS 3 来 完成 ， 包 括 一 些 字体 、 特 效 和 
响应 式 设 计 方法 。 

第 4 章 是 HTML 5 的 地 理 位 置 定位 ， 这 是 移动 开发 的 一 大 特色 ， 应 用 在 目前 很 多 的 LBS 
APP 和 地 图 APP 中 ， 重 点 是 实现 设备 的 定位 和 导航 。 

第 5 章 是 HTML 5 的 Web Workers, 这 是 HTML 5 通信 的 一 种 方式 , 可 以 监听 用 户 的 信息 ， 
实现 一 些 实时 操作 。 

第 6 章 是 HTML 5 的 Web 存储 HTML 5 和 PhoneGap 都 有 存储 功能 ， 这 里 的 存储 区 别 于 
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我 们 常 说 的 Cookis 和 Session。 

第 7 章 是 HTML 5 的 多 媒体 ， 这 可 能 是 大 家 最 熟悉 的 HTML 5 特色 了 ， 多 媒体 特色 让 我 
们 可 以 轻松 设计 一 个 视频 网 站 。 

第 8 章 是 PhoneGap 入 门 ， 介 绍 了 如 何 安装 和 配置 PhoneGap 的 开发 和 测试 环境 ， 并 帮助 
我 们 创建 第 一 个 属于 自己 的 移动 APP。 

第 9 章 是 PhoneGap 的 事件 处 理 ， 本 章 属于 原理 性 质 的 一 章 ， 因 为 PhoneGap 的 工作 都 是 
通过 事件 来 触发 的 ， 所 以 事件 处 理 非常 关键 ， 我 们 必须 了 解 PhoneGap 都 支持 哪些 事件 。 

第 10 章 是 PhoneGap 对 信息 的 处 理 ， 本 章 包括 两 种 信息 : 通讯 录 信 息 和 提示 信息 。 

第 11 章 是 加 速度 、 地 理 位 置 和 指南 针 ， 这 些 都 是 调用 手机 底层 功能 的 API， 本 章 学 习 了 
如 何 使 用 这 些 API， 并 将 其 与 自己 开发 的 APP 结合 。 

第 12 章 是 PhoneGap 中 的 多 媒体 控制 , 通过 PhoneGap 可 以 调用 手机 的 录音 、 视 频 和 图 像 ， 
本 章 学 习 了 如 何 来 调用 。 

第 13 章 是 PhoneGap 的 本 地 存储 ， 它 不 仅 可 以 和 HTML 5 的 本 地 存储 组 合 使 用 ， 还 可 以 
使 用 数据 库 。 

第 14 章 是 一 个 简单 的 “今日 头条 ”新 闻 APP， 学 习 如 何 利用 HTML 5+jQuery Mobile 开 
发 移动 跨 平 台 APP。 

第 15 章 是 HTML 5+PhoneGap 实现 通讯 录 APP， 本 章 使 用 前 面 学 过 的 调用 手机 内 置 功能 
的 APP， 开 发 一 个 跨 平台 的 通讯 录 APP。 
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11.5.2 ”素材 准备 
11.5.3 ”动画 实现 
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如 果 默 认 没 有 安装 Geolocation 怎么 办 
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第 1 章 
< HTML 5 移动 开发 的 大 背景 > 


2014 年 7 月 22 日 起 ,一 款 名 为 围 住 神经 猫 的 游戏 在 微 信 朋友 圈 疯 传 ， 引 爆 了 HTML 5 手 游 
开发 的 一 个 小 高 潮 。 

2014 年 10 月 底 ，W3C (万 维 网 联盟 ) 宣布 HTML 5 规范 正式 定稿 ， 大 部 分 媒体 此 时 都 预言 
HTML 5 将 开始 颠覆 原生 (Native) App 世界 。 

2015 年 1 月 11 日 , 微 信 开 放 了 11 个 JS-SDK 接口 ， 有 人 说 微 信 这 是 顺势 而 为 ， 因 为 腾讯 发 现 
通过 公众 号 为 用 户 提供 服务 似乎 并 不 符合 用 户 的 使 用 习惯 ， 而 公布 这 些 接口 ， 让 更 多 创业 者 通过 
用 户 熟 悉 的 网 页 获得 服务 ， 并 可 享受 微 信 朋友 圈 的 用 户 流 量 、 拍 照 、 语 音 翻 译 、 支 付 等 能 力 ， 然 
后 ，HTML 5 页 面 将 会 大 量 出 现在 朋友 圈 的 分 享 中 。 

2015 年 1 月 15 日 , 搜狐 发 布 基于 HTML 5 的 “手机 搜狐 网 3.0”， 并 邀请 “HTML 5 中 国 ” 等 
相关 网 站 举行 了 重大 的 发 布 会 。 

这 些 事件 统统 都 表明 ，HTML 5 时 代 真 的 来 了 ， 本 书 的 写作 就 是 基于 这 么 一 个 契机 。 


本 章 主要 内 容 包括 : 

了 解 HTML 5 的 简要 发 展 历史 

学 习 如 何 创 建 第 一 个 HTML 5 页 面 
了 解 HTML 5 移动 开发 的 方向 
熟悉 HTML 5 的 开发 工具 


HTML 5 是 什么 


作为 目前 互联 网 标准 的 重要 组 成 部 分 ，HTML 5 的 爆发 备 受 广大 技术 人 员 、 设 计 者 、 互 联网 
爱好 者 的 瞩目 ， 本 节 先 来 了 解 一 下 HTML 5 的 发 展 历史 。 


1.1.1 HTML 5 的 发 展 史 


在 Web 发 展 早期 中 ,HTML 标准 的 制定 都 是 浏览 器 厂商 们 相互 协商 产生 的 , 比如 HTML 2.0、 
HTML 3.2 到 HTML 4.0.HTML 4.01, 即 先 有 实现 后 有 标准 。 在 这 种 情况 下 , 这 些 协 商 出 来 的 HTML 
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标准 不 是 很 规范 ， 而 浏览 器 厂商 也 心 知 肚 明 ， 对 于 很 多 含有 错误 HTML 代码 的 页 面 也 相当 宽容 ， 
其 中 下 就 是 宽容 的 大 神 ， 以 至 于 性 能 上 落后 许多 。 

W3C (World Wide Web Consortium， 简 称 W3C， 中 文 译作 万 维 网 联盟 ) 随后 意识 到 了 这 个 问 
题 , 为 了 规范 HTML, W3C 结合 XML 制定 了 XHTML 1.0 标准 , 这 个 标准 没有 增加 任何 新 的 tag， 
只 是 按照 XML 的 要 求 来 规范 HTML。 

W3C 是 一 个 纯粹 为 了 标准 化 而 存在 的 非 熏 利 性 组 织 , 可 是 它 太 过 于 纯粹 而 忽略 了 各 大 浏览 器 
厂商 的 利益 。 双 方 在 两 年 多 的 时 间 里 交涉 未 果 的 情况 下 ,来 自 苹果 、Mozilla 基金 会 以 及 Opera 软 
件 等 浏览 器 厂商 ， 在 2004 年 成 立 了 WHATWG 工作 小 组 (Web Hypertext Application Technology 
Working Group)， 意 为 网 页 超 文本 技术 工作 小 组 。WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 
W3C 专注 于 XHTML 2.0。 

2007 年 ， 苹 果 、Mozilla 基金 会 以 及 Opera 软件 建议 W3C 接受 WHATWG 的 HTML 3， 正式 
提出 将 新 版 HTML 标准 定义 为 HTML 5。 于 是 HTML 5 就 正式 和 大 家 见面 了 。 但 此 时 此 刻 , HTML 
5 规范 并 未 定稿 ， 从 2007 年 到 2014 年 ， 普 罗 大 众 在 对 HTML 5 失落 和 期 待 反 复 交 替 的 日 子 中 度 
过 ,还 好 ，8 年 抗战 终于 结束 ，2014 年 10 月 底 ，W3C 宣布 已 经 完成 了 HTML 5 标准 的 制定 工作 ， 
将 这 种 基本 的 Web 技术 在 移动 和 云 互 联网 时 代 统 一 起 来 。 

HTML 5 提供 一 种 不 基于 插件 的 播放 多 媒体 内 容 和 应 用 程序 的 方法 。W3C 希望 该 规范 成 为 未 
来 “开放 式 网 络 平台 ”的 基石 ,“ 开 放 式 网 络 平台 ”是 一 套用 于 构建 跨 平台 在 线 应 用 的 标准 。 


1.1.2 如何 学 习 HTML5 
HTML 5 在 设计 之 初 就 基于 以 下 基本 的 理念 : 


新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。 
减少 对 外 部 插件 的 需求 (比如 Flash ) 。 

更 优秀 的 错误 处 理 。 

更 多 取代 脚本 的 标记 。 

HTML 应 该 独立 于 设备 。 

开发 进程 应 对 公众 透明 。 

从 这 些 理念 不 难看 出 ，HTML 5 走 的 是 开放 、 简 洁 的 路 子 ， 这 也 是 它 支持 跨 平台 最 基本 的 原 
因 。 我 们 要 学 习 HTML 5， 首 先 就 要 了 解 它 能 做 什么 ? 它 基于 HTML+CSS 技术 ， 所 以 它 肯 定 是 
可 以 开发 页 面 的 ， 它 独立 于 设备 ， 所 以 更 容易 跨 平台 。 这 两 点 正 是 我 们 学 习 HTML 5 最 主要 的 原 
因 。 

学 习 HTML 5， 必 须要 了 解 它 都 具备 什么 功能 ， 来 看 图 1.1。 
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图 1.1 HTML 5 的 8 大 特性 
并 不 是 所 有 特性 学 习 完 了 ， 才 叫 学 会 了 HTML 5， 实 际 上 ， 我 们 常用 到 的 共有 6 大 特性 : 


页 面 元 素 : 需要 学 习 一 些 标签 的 变化 和 转 为 移动 设计 的 拖 放 ， 参 考 第 2 章 。 
移动 布局 : 需要 学 习 CSS3 的 设计 和 移动 页 面 的 布局 ， 参 考 第 3 章 。 

地 理 位 置 定位 : 需要 学 习 获 取 地 理 位 置 的 相关 API， 参 考 第 4 章 。 

Web Workers: 需要 学 习 有 关 页 面 之 间 相 互通 信 的 一 些 技能 ， 参 考 第 5 章 。 
Web Storage: 需要 学 习 HTML5 提供 的 新 Web 存储 方案 ， 参 考 第 6 章 。 

多 媒体 : 需要 学 习 HTML5 提供 的 两 个 多 媒体 标签 ， 参 考 第 7 章 。 


1 .2 搭建 HTML 5 的 移动 Web 开发 环境 
搭建 HTML 5 开发 环境 只 需要 两 样 工具 (开发 工具 和 浏览 器 )， 而 且 基 本 无 需 任何 配置 。 


1.2.1 开发 工具 Sublime Text 


开发 工具 建议 选择 Sublime Text， 它 支持 目前 主流 的 操作 系统 ， 如 Windows、Mac、Linux， 
同时 还 支持 32 和 64 位， 支持 各 种 流行 编程 语言 的 语法 高 亮 、 代 码 补 全 等 。 该 款 编辑 器 插件 相当 
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丰富 ， 同 时 版 本 更 新 勤快 。 非 常 酷 的 一 点 是 编辑 器 右边 跟随 滚动 条 展示 的 有 代码 缩 略 图 。 

百度 一 下 就 可 以 下 载 Sublime Text 软件 ， 下 载 下 来 后 是 一 个 exe 文件 ， 安 装 即 可 。 打 开 该 软 
件 ， 输 入 一 些 HTML 5 代码 ， 效 果 如 图 1.2 所 示 ， 默 认 的 界面 颜色 比较 灰暗 ， 如 果 看 不 太 习惯 ， 
可 以 通过 菜单 项 Preferences|Color SchemelDawn 来 设置 底 色 。 


untitled 。- Sublime Text 2 (VNREGISTERED) 


File Bdit Selection Find Vier Goto Tools Project Preferences Help 


Untitled . 

1 <ldoctype html> 

2 <html> 

3 <head> 

4 <title> 简 音 的 HTML 5 页 面 </title> 

5 <link rele"stylesheet™ hrefe"../css/blog.css” type="text/css” 
/> 

6 </head> 

7 <body> 

8 <header> 

9 <hl?HTML 5</hl> 

19 </header> 

11 nav></nav> 

12 <aside></aside> 

13 <footer></footer> 

14 </body> 

15 </html> 


16 | 


图 1.2 Sublime Text 软件 界面 


读者 在 自己 的 电脑 上 用 这 个 软件 打开 一 个 页 面 文件 ,就 可 以 看 出 来 该 编辑 器 的 语法 高 亮 功 能 ， 
如 果 在 界面 中 输入 HTML 5 特有 的 标签 ， 还 会 给 出 “自动 补 全 ”的 提示 ， 如 图 1.3 所 示 。 


1 <tdoctype html> 


3 <head> 


4 <title> 简 单 的 HTML 5 页 面 </title> 

5 <link rel="stylesheet” hrefe"../css/blog.css” type="text/css" 
1 

6 </head> 

7 <body> 

日 <header> 

9 <hl>HTML 5S</hi> 

19 </header> 

11 <nav?</navy 

eee 

13 < 

14 < 

五 epos] SEcTIOn Tog 

6 </htm]| select Tog 


SELECT Tog 


1.3 ”Sublime Text 软件 的 自动 补 全 功能 


3 使 用 网 页 常用 的 开发 工具 Dreamweaver 也 可 以 开发 HTML 5， 但 软件 太 大 ， 下 载 和 使 用 都 很 
| 不 方便 。 


1.2.2 ”浏览 器 Chrome 或 Firefox 


浏览 器 建议 选择 Chrome 或 Firefox， 因 为 它们 都 支持 HTML 5 的 一 些 最 新 特性 ， 而 且 也 都 具 
备 浏览 器 内 置 的 HTML 5 调试 工具 。 
下 载 并 打开 Chrome 浏览 器 ， 单 击 浏览 器 右 侧 的 = 按钮， 然后 单 击 “ 更 多 工具 | 开发 者 工具 ” 
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命令 ， 就 会 在 浏览 器 下 方 打开 开发 者 工具 界面 ， 如 图 1.4 所 示 。 


wi 
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Google 


图 1.4 Chrome 开发 者 界面 


Firefox 也 有 这 个 功能 , 打开 Firefox 浏览 器 , 单 击 右 侧 的 于 | 按 钮 , 在 打开 的 界面 中 , 选择 “ 开 
发 者 ”选项 ， 然 后 单 击 “切换 工具 箱 ” 命 令 ， 就 打开 了 如 图 1.5 所 示 的 界面 


网 页 新 闻 地 图 视频 图 片 音乐 购物 知道 
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2 a.innerHTHL sc}var erwindow.docunent, Ke"http://ecl 


.createElenent("script"); 


1.5 ”Firefox 开发 者 界面 


必 元 Firefox 版 本 不 同 ， 打 开 方 式 可 能 会 稍 有 差异 。 | 
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有 了 开发 工具 和 浏览 器 后 ， 我 们 就 可 以 正式 进入 HTML 5 的 开发 阶段 了 。 


| HTML 5 也 可 以 直接 写 在 记事 本 或 写字 板 中 ， 但 如 果 编 写 的 代码 太 多 ， 还 是 建议 使 用 开发 工 
[ 具 ， 一 是 容易 发 现 错误 ， 二 是 标签 的 提示 功能 可 以 提高 开发 效率 。 


1.2.3 浏览 器 下 的 移动 测试 环境 


既然 是 移动 开发 ， 肯 定 不 像 在 PC 上 用 浏览 器 显示 网 页 这 么 简单 ， 大 部 分 的 移动 页 面 还 只 是 
显示 在 手机 端 ， 所 以 我 们 要 设置 浏览 器 的 移动 设备 查看 方式 。 

在 Chrome 浏览 器 的 开发 者 工具 页 面 下 , 有 如 图 1.6 所 示 的 这 一 个 设备 按钮 , 单 击 该 按钮 就 会 
打开 移动 设备 的 测试 界面 ， 如 图 1.7 所 示 ， 这 个 时 候 我 们 可 以 通过 选择 设备 、 选 择 大 小 来 查看 页 
面 在 移动 端的 浏览 效果 。 

QCD Elements Network | Sources| Timeline Profiles Resources Audits » 
图 1.6 开发 者 工具 第 一 栏 


人 le://F:/2014 写 作 /HTML5+PHONEGAP/ 正 文 /源码 /first.htnl 客 三 


1.7 ”Chrome 下 的 移动 测试 界面 


医改 如 果 没有 图 1.6 所 示 的 这 个 按钮 ， 需 要 下 载 最 新 版 的 Chrome 浏览 器 。 | 


和 


在 Firefox 中 也 有 这 个 功能 ， 打 开 开发 者 工具 的 “响应 式 设计 视图 ”， 效果 如 图 1.8 所 示 ， 在 
这 里 我 们 也 可 以 通过 调整 大 小 来 测试 页 面 在 移动 端的 效果 。 
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制作 一 个 简单 的 HTML 5 标准 移动 Web 页 面 


前 面 我 们 初步 了 解 了 HTML 5 的 历史 ， 本 节 开 始 学 习 一 个 简单 的 HTML 5 移动 页 面 。 首 先 设 


计 一 个 移动 页 面 ， 结 构 如 图 1.9 所 示 。 


标 题 


主 内 容 


页 脚 


图 19 第 一 个 页 面 的 架构 
写 如 下 代码 ， 然 后 保存 为 first.html。 


打开 Sublime Text 软件 ， 


01 <!doctype html> 
02 <html> 
03 <head> 
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这 里 我 们 创建 的 是 一 个 只 有 空 结构 的 HTML 5 页 面 ， 从 第 2 章 开始 我 们 将 会 详细 介绍 每 个 标 
签 的 含义 和 使 用 。 


1 4 检测 移动 设备 是 否 支持 HTML 5 标签 


在 开发 HTML 5 应 用 时 ， 为 了 实现 浏览 器 的 兼容 性 ， 需 要 对 一 些 不 支持 新 特性 的 浏览 器 做 优 
雅 降级 ， 目 的 是 为 了 尽 可 能 使 用 户 体验 更 加 顺畅 ， 这 时 候 就 需要 对 不 同 的 浏览 器 做 功能 检测 。 通 
常 有 几 种 方法 可 以 检测 浏览 器 是 否 支持 HTML 5 标签 ， 如 原生 的 标签 兼容 提示 、 浏 览 器 检测 、 特 
征 检测 等 。 


1.4.1 原生 的 标签 兼容 提示 


首先 查看 原生 标签 提示 ， 当 浏览 器 遇 到 一 些 无 法 识别 的 标签 时 ， 只 会 将 其 作为 一 个 普通 文本 
节点 进行 展现 ， 如 HTML 5 中 的 canvas 标签 。 下 面 通过 一 个 简单 的 实例 对 比 支持 与 不 支持 浏览 器 
的 区 别 ， 示 例 代 码 如 下 : 
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先 用 支持 canvas 标签 的 Google Chrome 浏览 器 打开 该 文件 ， 可 以 看 到 该 标签 能 够 正常 显示 ， 
效果 如 图 1.10 所 示 。 再 用 不 支持 canvas 标签 的 Internet Explorer 8 打开 文件 页 面 上 显示 “该 浏览 
器 不 支持 canvas” 提 示 信息 ， 效 果 如 图 1.11 所 示 。 


让 


1.10 Google Chrome 浏览 器 打开 网 页 文件 图 1.11 Intemet Explorer 8 浏览 器 打开 网 页 文 
1.4.2 ”浏览 器 检测 


另外 一 种 常用 的 检测 手段 是 浏览 器 检测 ， 主 要 原理 是 先 判断 浏览 器 的 类 型 和 版 本 ， 然 后 在 知 
晓 该 类 型 版 本 浏览 器 支持 的 情况 下 进行 操作 。 我 们 通过 一 个 示例 代码 介绍 如 何 实现 ， 代 码 如 下 : 


该 示例 运行 效果 与 上 一 个 示例 效果 相同 。 示 例 开始 先 获取 浏览 器 的 User Agent，User Agent 
是 HTTP 协议 中 头 信息 的 一 部 分 ， 用 来 告诉 服务 器 用 户 客户 端 是 什么 浏览 器 ， 以 及 操作 系统 等 的 
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信息 。 通 过 分 析 User Agent 获取 浏览 器 的 类 型 和 版 本 信息 ， 对 不 支持 的 浏览 器 采取 错误 提示 。 浏 
览 器 检测 这 个 方案 看 上 去 相当 完美 ， 不 过 有 几 个 致命 的 缺点 : 


@ User Agent 可 以 伪造 ， 很 多 浏览 器 支持 用 户 修改 User Agent 信息 。 
e 不 断 更 新 的 浏览 器 版 本 ， 需 要 同步 更 新 检测 信息 。 


1.4.3 ”特征 检测 


最 后 介绍 的 一 种 方案 应 该 是 最 完美 的 ， 一 般 称 为 特征 检测 ， 即 通过 判断 特定 的 对 象 、 属 性 、 
方法 、 行 为 确认 功能 是 否 可 以 使 用 。 下 面 通过 一 个 示例 介绍 这 个 检测 方法 ， 代 码 如 下 : 


该 段 示例 运行 效果 与 首 段 示例 “原生 标签 提示 ”效果 相同 。 

代码 第 6 行 创建 一 个 canvas 标签 元 素 , 然后 在 第 7 行 通过 获取 新 创建 canvas 元 素 的 getContex 
属性 判断 是 否 存在 ， 当 存在 该 属性 时 ， 表 示 浏 览 器 支持 canvas 元 素 。 特 征 检测 的 优势 在 于 ， 开 发 
者 不 需要 了 解 浏览 器 的 支持 情况 ， 而 是 通过 直接 检测 获知 某 个 特性 是 否 支持 。 


了 .5 为 什么 HTML 5 需要 PhoneGap 


HTML 5 已 经 能 够 在 所 有 移动 设备 上 使 用 了 ， 那 还 为 什么 需要 PhoneGap 呢 ? 因为 HTML 5 
是 仅 为 浏览 器 而 生 的 ， 并 没有 权利 调用 手机 底层 的 一 些 功能 ， 如 调用 手机 的 加 速 器 、 电 话 短 、 声 
音 、 震 动 、 指 南 针 等 等 ， 而 移动 APP 是 为 手机 而 生 的 ， 它 经 常 需要 调用 手机 上 的 这 些 底层 功能 ， 
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于 是 PhoneGap 出 现 了 ,当然 PhoneGap 诞生 的 原因 并 不 是 弥补 HTML 5 这 方面 的 不 足 , 重点 是 为 
了 获得 移动 APP 的 跨 平台 兼容 性 。 

HTML 5 可 以 实现 Web APP 的 开发 ， 而 PhoneGap 又 是 一 个 HTML 5 平台， 兼容 HTML5 的 
这 些 重要 特性 ， 所 以 HTML 5+PhoneGap 的 混合 开发 模式 ， 成 为 很 多 企业 的 首选 APP 开发 模式 ， 
这 也 是 本 书写 作 的 初衷 。 

PhoneGap 的 标准 称呼 其 实 是 “中 间 件 ” 它 为 每 个 WebApp 提供 一 个 原生 的 壳 。 借 助 于 这 个 
壳 ，WebApp 可 以 被 安装 到 手机 上 ， 可 以 被 发 布 到 各 大 手机 应 用 市 场 。 同 样 地 ， 借 助 于 过 和 设备 
之 间 的 通信 ， 壳 内 的 WebApp 可 以 轻松 调用 设备 硬件 。 这 种 过 ， 就 是 “中 间 件 ”。 


1.6 4 千 


本 章 首先 介绍 了 HTML 5 的 发 展 历史 ， 然 后 学 习 了 利用 开发 工具 来 快速 开发 HTML 5， 最 后 
学 习 了 3 种 检测 浏览 器 是 否 支持 HTML 5 的 技术 。 通 过 本 章 的 学 习 ， 读 者 应 该 能 够 开发 一 个 简单 
的 HTML 5 页面， 并 且 会 用 流行 的 浏览 器 来 检测 HTML 5 页 面 的 移动 浏览 效果 。 


和 抽 


第 2 章 
< HTML 5 的 页 面 元 素 * 


HTML 5 毕竟 是 基于 传统 的 HTML 基础 ， 所 以 在 设计 上 ， 有 很 多 基于 页 面 基本 元 素 的 新 设计 ， 
如 常用 的 input 输入 型 元 素 ， 这 些 元 素 以 前 很 多 输入 和 验证 需要 通过 JavaScript 和 Ajax 完成 ， 而 
HTML 5 新 增 了 一 些 input 元 素 ， 并 且 提 供 了 新 的 、 更 加 方便 的 验证 方法 。HTML 5 还 提供 了 拖 放 
操作 ， 目 前 在 移动 开发 中 ， 这 个 操作 非常 常用 。 


本 章 主要 内 容 包括 : 

了 解 HTML 5 的 结构 

学 习 HTML 5 的 字符 集 

学 习 HTML 5 新 增 的 input 元 素 
掌握 HTML 5 中 的 拖 放 


从 全 局 了 解 HTML 5 


在 HTML 5 新 元 素 出 现 之 前 , 编写 HTML 一 直 试 图 用 DIV 去 模拟 各 种 形态 ,比如 section( 章 
节 )、header (页 眉 )、fboter (页 脚 )、nav〈 导 航 )、article (条 目 ) 等 ， 通 过 元 素 的 ID 属性 赋予 
DIV 新 的 特征 ， 零 碎 的 命名 和 没有 统一 的 规范 使 得 页 面 的 语义 差强人意 ， 对 页 面 的 SEO (Search 
Engine Optimization， 即 搜索 引擎 优化 ) 缺乏 友善 的 引导 等 等 ，HTML 5 在 元 素 上 的 追加 和 增强 正 
弥补 这 种 不 足 。 本 章 从 HTML 5 的 页 面 结构 和 标签 入 手 来 引导 读者 全 面 了 解 HTML 5。 


2.1.1 显示 内 容 的 交互 


HTML 5 不 仅仅 提供 了 一 堆 在 语义 上 进行 强化 了 的 元 素 ， 而 且 在 交互 效果 上 也 做 了 极 大 的 改 
善 。 本 节 通 过 details 与 summary 两 个 元 素来 介绍 内 容 交互 。 

details 元 素 用 来 描述 文档 或 文档 片段 的 信息 ，summary 元 素 与 details 元 素 一 同 使 用 ， 用 于 说 
明文 档 的 标题 ， 同 时 ，summary 元 素 应 为 details 元 素 的 第 一 个 子 元 素 。 下 面 通 过 一 个 简单 的 示例 
展示 summary 与 details 的 使 用 ， 代 码 如 下 : 
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details 与 summary 元 素 示 例 的 交互 效果 如 图 2.1 所 示 。 


图 2.1 details 与 summary 元 素 示例 
details 同时 还 具备 open 属性 ， 用 于 表示 是 和 否 展开 可 见 ， 语 法 如 下 : 


2.1.2 HTML 5 页 面 与 XHTML 页 面 的 对 比 


HTML 5 在 结构 上 散发 着 简洁 之 美 ， 同 时 又 不 失 良好 的 语义 结构 。 先 看 传统 的 HTML 5 出 现 
之 前 的 网 页 设计 结构 ， 代 码 如 下 : 
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如 果 使 用 HTML 5 诠释 上 面 的 页 面 ， 代 码 如 下 : 


对 比 两 段 示 例 代码 可 以 看 到 ， 不 用 再 去 复制 元 长 的 文档 规范 ， 而 且 不 用 在 意 doctype 是 大 写 
还 是 小 写 ， 这 是 极 简 的 经 典 体现 。 另外， 在 html 元 素 上 的 xmlns 属性 也 得 到 了 释放 ， 这 个 早期 用 
于 设 定 XML 命名 空间 的 方法 可 以 退出 历史 舞台 了 。 


meta 属性 中 的 keywords 和 description 类 型 ， 主 要 用 于 提供 搜索 引擎 优化 查询 ， 让 用 户 在 使 用 
搜索 引擎 时 ， 能 快速 地 通过 关键 字 查找 到 对 应 的 页 面 。 


2.1.3 “元素 的 使 用 场景 和 使 用 方法 


在 HTML 5 的 页 面 中 ， 经 常 可 以 看 到 增强 语义 性 的 元 素 ， 通 过 元 素 的 英文 字面 就 能 大 致 理解 
元 素 的 使 用 场景 。 下 面 通过 示例 向 读者 介绍 常用 元 素 的 使 用 场景 和 使 用 方法 。 


(1) header 元 素 ， 用 于 显示 页 面 或 者 指定 区 域 的 页 眉 或 头 部 ， 使 用 方法 如 下 : 


《2) hgroup 元 素 ， 用 于 对 网 页 或 区 段 的 标题 进行 组 合 ， 如 对 文章 的 标题 和 副标题 进行 组 合 ， 
使 用 方法 如 下 : 
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(3) aside 元 素 ， 用 于 定义 所 处 内 容 之 外 的 内 容 ， 但 又 与 附近 内 容 有 相关 性 ， 如 用 于 显示 某 篇 
文章 的 作者 信息 ， 使 用 场景 代码 如 下 : 


(4) section 元 素 ， 用 于 定义 文档 中 的 节 ， 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 如 下 代 
码 表 示 文 档 中 的 段落 : 


(5) article 元 素 ， 用 于 定义 独立 的 内 容 ， 如 来 自 论坛 的 帖子 、 新 闻 报纸 的 文章 、 博 客 文本 、 
网 站 用 户 评论 等 。 下 面 代码 表示 一 篇 文章 : 


HTML 5 为 使 用 者 带 来 了 大 量 的 语义 元 素 标签 ， 表 面 上 看 会 带 来 大 量 的 学 习 成 本 ， 但 一 旦 熟 
练 使 用 ， 编 写 一 张 语 义 清晰 并 且 对 搜索 引擎 友好 的 页 面 将 会 是 轻而易举 的 事情 。 如 果 想 成 为 一 位 
合格 的 前 端 开发 者 ， 那 么 学 习 这 些 新 标签 是 学 习 HTML 5 的 第 一 步 也 是 最 容易 上 手 的 一 步 。 
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2.1.4 HTML 5 中 的 字符 集 


在 HIML 5 出 现 之 前 ， 浏 览 器 会 根据 3 种 方式 确认 页 面 的 编码 格式 ， 按 优先 级 排列 如 下 : 


e 获取 HTTP 请 求 头 中 的 Content-Type 字符 对 应 的 值 。 
e 使 用 meta 标签 声明 ， 语 法 格式 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

e 外 链 资源 使 用 charset 属性 声明 编码 格式 ， 如 script 标签 中 使 用 语法 格式 如 下 : 
<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script> 

HTML 5 出 现 后 ， 对 字符 集 的 使 用 做 了 大 量 的 简化 ， 可 以 使 用 以 下 语法 进行 字符 集 声 明 : 
<meta charset="utf-8"> 

对 于 日 常 使 用 网 站 开发 而 言 ， 结 合 HTML 5 的 字符 集 使 用 ， 笔 者 给 出 如 下 建议 : 


最 优先 使 用 HTTP 请 求 头 指定 编码 。 

统一 全 站 字符 集 编码 ，HTML 5 推荐 UTF-8 字符 集 。 

使 用 meta 标签 确认 字符 集 编码 ， 尽 可 能 放 在 html 标签 的 第 一 个 子 元 素 位 置 。 
第 三 方 引 用 的 脚本 ， 在 不 确认 字符 编码 时 ， 加 上 charset 属性 设置 编码 格式 。 


HTML 5 表单 元 素 的 变化 


在 表单 的 设计 中 ，HTML 5 增加 了 比较 多 的 元 素 。 本 节 将 介绍 最 常见 的 input 元 素 和 HTML 5 
特地 为 input 元 素 增加 的 属性 。 


2.2.1 ”新 增 的 input 元 素 


表单 中 使 用 最 多 的 莫 过 于 input 元 素 ， 主 要 用 于 填写 用 户 信息 。 传 统 的 input 元 素 有 10 种 类 
型 ， 如 表 2.1 所 示 。 


表 2.1 传统 的 input 元 素 类 型 


类 型 名 称 | 说 明 
bulk | 可 点 击 的 按钮 


输入 字段 和 “浏览 器 ”按钮 ， 用 于 文件 上 传 
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( 续 表 ) 
类 型 名 称 说 明 
hidden 隐藏 的 输入 字段 
image 图 像 形式 的 提交 按钮 
password 密码 输入 框 ， 输 入 的 字符 被 掩 码 
radio 单 选 按钮 


text 


重 置 按钮 ， 清 空 表单 内 的 所 有 数据 


提交 按钮 ， 提 交 表 单数 据 至 远程 服务 器 
文本 输入 框 


HTML 5 在 此 基础 上 做 了 进一步 的 加 强 ， 添 加 了 另外 13 种 类 型 ， 如 表 2.2 所 示 。 


表 2.2 HTML 5 新 增 input 元 素 类 型 


类 型 名 称 说 明 

date 带 日 历 控件 的 日 期 字段 
datetime 带 日 历 和 时 间 控 件 的 日 期 字段 
datetime-local 带 日 历 和 事件 控件 的 日 期 字段 
email 电子 邮箱 文本 字段 

month 带 日 历 控件 的 日 期 字段 的 月 份 
number 带 数字 控件 的 数字 字段 

range 带 滑动 控件 的 数字 字段 

time 带 时 间 控 件 的 日 期 字段 的 时 、 分 、 秒 
url URL 文本 字段 

week 带 日 历 控件 的 日 期 字段 周 
color 拾 色 器 

search 用 于 搜索 的 文本 字段 

tel 用 于 电话 号 码 的 文本 字段 


为 了 便于 读者 观察 学 习 ， 图 2.2 呈现 了 各 种 input 元 素 新 类 型 在 网 页 中 的 预览 效果 。 
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Date: [年 7 有/ ”可 v 

Datetine: ， 
Datetime-local: | 年 /月 /日 一 :一 =|v 
Erail:[ 

Month: 太一 年 -月 “可 


图 22 HTML 5 新 增 input 元 素 类 型 的 预览 效果 


一 目前 不 是 所 有 浏览 器 都 支持 上 述 input 新 类 型 ， 读 者 可 以 使 用 Chrome 最 新 版 进行 浏览 。 | 
€ 


2.2.2 ”新 增 的 input 属性 
HTML 除了 带 来 令 人 激动 的 input 新 类 型 ， 同 时 还 带 来 了 非常 多 的 input 新 属性 。 以 往 需要 用 
JavaScript 实现 的 功能 ， 现 在 只 需要 修改 一 个 属性 就 能 搞定 。HTML 5 新 标准 带 来 了 更 加 细致 的 分 
工 ， 使 得 开发 者 拥有 更 多 便捷 的 使 用 选择 。 
下 面 将 介绍 input 新 属性 ， 首 先 通过 表 2.3 看 看 到 底 都 新 增 了 哪些 属性 。 
表 2.3 HTML 5 新 增 input 元 素 属性 
属性 名 称 说 明 
借用 输入 自动 完成 功能 
页 面 在 载 入 成 功 后 获得 焦点 ，type 类 型 为 idden 的 除外 
规定 字段 所 局 表 单 ， 可 多 个 


formaction 覆盖 所 属 表 单 的 action 属性 ， 适 用 于 type 类 型 为 submit、image 
formenctype 覆盖 所 属 表 单 的 enctype 属性 ， 适 用 于 type 类 型 为 submit、image 
formethod 履 盖 所 属 表 单 的 method 属性 ， 适 用 于 type 类 型 为 submit、image 
formnovalidate 覆盖 所 属 表单 的 novalidate 属性 ， 适 用 于 type 类 型 为 submit、image 
formtarget 覆盖 所 属 表单 的 target 属性 ， 适 用 于 type 类 型 为 submit、image 

引用 输入 字段 提示 的 对 应 datalist 数据 

输入 数字 的 最 大 值 

输入 数字 的 最 小 值 

输入 字段 值 的 模式 ， 正 则 格式 

输入 字段 提示 
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( 续 表 ) 
属性 名 称 说 明 
required 表示 输入 字段 的 值 是 必需 的 ， 不 为 空 
step 输入 数字 的 间隔 
multiple 允许 选择 多 个 上 传 文件 


接 下 来 我 们 结合 实际 使 用 场景 介绍 部 分 新 增 属 性 功能 ， 使 读者 能 够 在 平时 的 开发 中 灵活 地 运 
用 这 些 新 功能 。 


1. autocomplete 属性 


autocomplete 属性 默认 是 开启 状态 ， 浏 览 器 自身 会 记录 页 面 对 应 文本 框 每 次 输入 的 信息 ， 当 
用 户 键入 相关 的 字符 时 ， 会 出 现 相关 的 提示 信息 。 但 有 些 情况 下， 用户 并 不 希望 浏览 器 自己 做 出 
提示 ， 因 为 很 多 时 候 用 户 错误 的 输入 信息 也 会 被 记录 下 来 。 在 很 多 第 三 方 类 库 中 都 会 提供 下 拉 提 
示 插 件 ， 即 当 用 户 输入 文字 时 ， 将 与 文字 相关 的 信息 在 输入 文本 框 下 方 进行 提示 选择 ， 使 用 者 可 
以 非常 方便 地 在 输入 部 分 关键 字 后 ， 找 到 自己 真实 想 要 的 结果 ， 如 百度 搜索 框 的 下 拉 提示 ， 如 图 
2.3 所 示 。 


Bai 售 天 度 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 地 图 
html 百度 一 下 
htmis 
htm 属 程 
html 编 辑 器 
html 代 码 
html 是 什么 
htmls 教程 
html 空格 
html 语 言 
htmlspecialchars 
html table 


图 23 百度 查询 下 拉 提示 


有 对 于 使 用 下 拉 提 示 效 果 的 文本 输入 框 ， 都 会 将 autocomplete 属性 设置 为 off， 以 避免 浏览 器 默 
| 认 提 示 框 与 JavaScript 插件 模拟 的 提示 框 在 页 面 上 相互 交 三 。 


2. autofocus 属性 


autofocus 属性 默认 为 关闭 状态 ， 在 该 属性 没有 出 现 之 前 ， 要 实现 类 似 的 功能 需要 借助 于 
JavaScript。 一 般 input 元 素 的 autofocus 属性 会 用 在 表单 的 第 一 个 填写 元 素 上 , 如 常见 的 登录 页 面 ， 
效果 如 图 2.4 所 示 。 
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口 一 个 月 之 内 免 登 录 
卫 我 已 看 过 并 同意 大 众 点 评 网 长 用 户 使 用 协议 办 


登录 


图 2.4 登录 页 面 


autofocus 属性 主要 的 用 处 是 ， 当 页 面 加 载 完 毕 后 ， 用 户 可 以 通过 键盘 直接 输入 信息 ， 而 不 需 
要 通过 鼠标 点 选 输入 框 后 再 进行 输入 ， 是 一 种 交互 体验 上 的 优化 。 为 了 在 老 版 本 的 浏览 器 中 实现 
类 似 于 autofocus 属性 的 效果 ， 可 以 通过 JavaScript 强行 触发 元 素 的 focus 事件 ， 代 码 如 下 : 


趣 正常 的 情况 下 ， 一 个 页 面 只 会 出 现 一 个 被 设置 了 autofocus 属性 的 input 元 素 。 


3.form 属性 


form 属性 的 出 现 ， 使 得 input 元 素 从 表单 结构 中 完全 解放 出 来 。 使 用 过 HTML 5 之 前 的 表单 
的 开发 者 会 知道 ， 只 有 将 input 元 素 放置 在 表单 标签 内 ， 数 据 才 能 同 表单 一 起 被 提交 ， 这 样 的 设 
计 使 得 页 面 元 素 利用 率 大 打折 扣 ， 页 面 设计 上 出 现 过 多 无 用 的 结构 。 新 属性 的 使 用 方法 如 下 : 


功 当 一 个 input 元 素 被 用 于 多 个 表单 ， 可 以 在 form 属性 上 将 各 表单 记 值 以 空格 符 隔 开 填 写 。 
4. 重 写 表单 的 input 属性 
HTML 5 的 input 元 素 中 ， 还 有 一 类 新 属性 用 于 重 写 input 元 素 所 属 表单 属性 ， 如 下 : 
e formaction: 重 写 表单 的 action 属性 ，action 用 于 设 定 发 送 表单 数据 的 请 求 地 址 。 


e@ formenctype: 重 写 表单 的 enctype 属性 ，enctype 表示 发 送 表单 的 编码 格式 ， 如 
multipart/form-data， 表 单 默 认 以 application/x-www-form-urlencoded 编码 格式 进行 发 送 。 
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e formmethod: 重 写 表单 的 method 属性 ，method 表示 发 送 表单 数据 的 方法 ， 常 用 的 如 get、 
post。 

。 formnovalidate: 重 写 表单 的 novalidate 属性 ，novalidate 表示 不 对 表单 数据 进行 浏览 器 默 
认 验 证 ， 如 验证 input 类 型 为 url、email、telephoned 的 元 素 。 

eformtarget: 重 写 表单 的 target 属性 ，target 属性 规定 在 何 处 打开 提交 请 求 。 


5.list 属性 


input 元 素 的 list 属性 是 一 个 相当 与 时 俱 进 的 改进 ， 它 将 以 往 用 JavaScript 实现 的 输入 选择 框 
通过 原生 的 浏览 器 功能 实现 ， 使 用 方法 如 下 : 


示例 效果 如 图 2.5 所 示 。 
网 站 : 厂 ”| 再 到 
http’//ww. google com 各 繁 
http://wre. baidu com 目 庚 
http://w. taobao. com 于 于 
http: /ww. dianping com  * 从 SH 
图 2.5 input 元素 list 使 用 
6. placeholder 属性 


input 元 素 的 placeholder 属性 是 一 类 实战 性 非常 强 的 应 用 实现 。 多 数 网 站 在 设计 输入 框 的 同 
时 ， 为 了 达到 良好 的 用 户 交 互 体验 ， 会 在 输入 框 的 空白 输入 处 添加 一 段 灰色 的 提示 文字 ， 方 便 用 
户 按照 设计 意图 进行 填写 。 在 placeholder 属性 出 现 之 前 通常 有 两 类 实现 方法 : 


@ 监听 input 元 素 的 focus 和 blur 事件 ， 在 获取 焦点 时 ， 将 预先 输入 在 文本 框 内 的 文字 清空 ， 
并 修改 文本 框 的 输入 字体 颜色 。 

@ 在 文本 框 的 上 方 悬 浮 一 个 用 于 提示 的 lable 标签 ， 当 点 击 标签 时 ， 隐 藏 标签 并 通过 脚本 强 
行 设置 下 方 文本 框 获取 焦点 。 


placeholder 使 用 方法 如 下 : 


placeholder 属性 的 出 现 有 效 地 解决 了 这 类 常用 问题 ， 相 同 的 功能 可 以 完全 使 用 原生 的 属性 进 
行 蔡 代 ， 减 少 了 开发 代码 量 和 开发 成 本 。 
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2.2.3 HTML 5 表单 的 验证 方法 


HTML 5 除了 给 表单 带 来 了 多 种 类 型 的 input 元 素 和 多 种 新 元 素 外 同时 还 加 强 了 表单 验证 方 
面 的 体验 。 以 往 开发 者 想 要 给 表单 添加 验证 有 两 种 方法 : 


日 通过 浏览 器 脚本 监听 表单 提交 事情 ， 验 证 提交 数据 是 否 符合 输入 格式 ， 并 给 出 提示 。 
e 在 表单 提交 后 ， 后 台 服 务 器 对 表单 数据 进行 验证 ， 对 于 无 法 通过 的 数据 重新 输出 页 面 进行 
提示 。 


HTML 5 给 开发 者 带 来 了 第 3 种 表单 验证 方法 ， 即 通过 表单 元 素 内 置 的 验证 属性 。 当 使 用 者 
提交 表单 ， 浏 览 器 会 根据 各 元 素 自身 的 验证 属性 进行 判断 并 给 出 提示 。 下 面 介绍 一 下 与 表单 相关 
验证 的 属性 。 


1. novalidate 属性 


novalidate 属性 可 以 作用 于 form 和 input 元 素 ， 表 示 该 元 素 区 域 不 进行 表单 验证 。 表 单 默 认 在 
提交 时 会 验证 类 型 为 url、telephone、email、date 的 元 素 ， 代 码 如 下 : 


网 页 运行 效果 如 图 2.6 所 示 。 
网址 [Ba 
2.6 带 有 ur 类 型 的 input 元 素 表单 


在 文本 框 内 输入 不 符合 URL 规则 的 内 容 ， 并 单 击 “ 提 交 ” 按 钮 ， 表 单 出 现 “ 请 输入 网 址 。” 
的 信息 提示 ， 效 果 如 图 2.7 所 示 。 


网: | 
加 请 输入 网 址 。 
图 2.7 提交 表单 出 现 错误 提示 


假如 在 某 些 情况 下 ， 输 入 的 网 址 内 容 并 不 一 定 需要 严格 遵循 规范 要 求 ， 则 可 以 通过 在 form 
元 素 上 添加 novalidate 属性 解决 ， 代 码 如 下 : 
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2. pattern 属性 


pattem 属性 用 于 验证 input 提交 内 容 的 格式 ， 验 证 格式 为 正则 表达 式 。 如 下 例子 显示 只 能 输 
入 3 个 数字 的 文本 框 ， 代 码 如 下 : 


在 文本 输入 框 内 输入 “a”， 并 单 击 “ 提 交 ” 按 钮 ， 此 时 输入 的 内 容 与 pattern 属性 的 验证 规 
则 不 相符 ， 表 单 出 现 “请 与 所 请 求 的 格式 保持 一 致 ”的 提示 ， 效 果 如 图 2.8 所 示 。 


3 位 数 : P | 本 到 


本 请 与 所 请 求 的 格式 保持 一 致 。 


图 2.8 pattem 属性 提交 提示 


正则 表达 式 是 用 一 个 “字符 串 ” 来 措 述 一 个 特征 ， 然 后 去 验证 另 一 个 “字符 串 ” 是 否 符合 这 
个 特征 。 比 如 ， 表 达 式 “ab+” 描 述 的 特征 是 “一 个 a 和 任意 个 b ， 那 么 “ab”、 “abb”、 
“abbbbbbbbbb ”都 符合 这 个 特征 。 正 则 表达 式 的 使 用 可 以 参考 
http:/ /msdn.microsoft.com/zh-cn/library/aeSbf541(VS.80).aspx。 


3. required 属性 


required 属性 作用 于 input 元 素 规定 输入 的 内 容 不 能 为 宝 可 以 与 之 前 的 novalidate 和 pattern 
属性 组 合 使 用 ， 示 例 代码 如 下 : 
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07 </body> 

08 </html> 

当 用 户 不 输入 任何 内 容 ,直接 单 击 “ 提 交 ” 按 钮 ， 表 单 会 做 出 提示 ， 显 示 “ 请 填写 此 字段 ”， 
效果 如 图 2.9 所 示 。 


邮箱 : | 提交 
网 请 填写 此 字段 。 


29 required 属性 使 用 
required 属性 在 表单 的 应 用 中 最 为 常用 ， 同 时 结合 pattern 属性 ， 能 发 挥 出 强大 的 验证 功能 。 


2 .JJ HTML 5 专 为 移动 设计 的 拖 放 


HTML 5 页 面 允许 跨 平 台 ， 这 也 使 得 HTML 5 在 移动 端 得 到 更 多 的 应 用 ， 本 节 介 绍 HTML 5 
为 移动 页 面 增加 的 一 些 设计 。 


2.3.1 控制 拖 放 操作 


Datatransfer 对 象 是 HTML 5 新 增 的 数据 对 象 ， 主 要 用 于 控制 拖 放 操 作 中 的 数据 ， 提 供 了 预定 
义 的 剪贴 板 格 式 数据 访问 功能 ， 如 可 在 dragstart 事件 触发 时 进行 数据 设置 ， 之 后 在 触发 drop 事件 
时 对 数据 进行 读 取 和 修改 。Datatransfer 对 象 目前 拥有 如 下 4 个 属性 : 


@ dropEffect: 设置 或 获取 抑 息 操作 的 类 型 和 要 显示 的 光标 类 型 ， 如 类 型 “none”、 


“copy”、 “link” 和 “move”。 
@ ”effectAllowed: 设置 或 获取 数据 传送 操作 可 应 用 于 该 对 象 的 拖 放 效 果 ， 如 效果 “none”、 
“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、 “all” 


和 “uninitialized” 。 

e files: 拖 放 时 的 文件 列表 。 

e@ types 返回 在 dragstart 事件 触发 时 为 元 素 存储 数据 格式 类 型 ， 如 果 是 外 部 文件 的 拖 放 则 返 
回 “files” 字 符 串 。 

另外 ，Datatransfer 对 象 还 拥有 5 种 常用 方法 ， 说 明 如 下 : 


addElement: 添加 一 同 跟随 拖 搜 的 元 素 。 

clearData: 删除 指定 格式 数据 ， 如 未 指 设 定 ， 则 删除 当前 元 素 下 所 有 携带 数据 。 

getData: 返回 指定 数据 ， 如 果 数据 不 存在 ， 则 返回 空 字 符 串 。 

setData: 给 元 素 添加 指定 数据 。 

setDragImage: 指定 拖 搜 元 素 时 ， 跟 随 鼠 标 移动 的 图 片 ，x、y 分 别 为 相对 于 鼠标 的 偏 移 量 。 
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Datatransfer 对 象 一 般 在 dragstart 事件 触发 时 使 用 ,关键 方法 setData 一 般 采 用 两 种 数据 格式 : 
用 于 文本 数据 存储 的 “text/plain” 和 用 于 URL 信息 存储 的 “text/uri-list”。 


2.3.2 ”监听 拖 放 事件 


拖 放行 为 的 所 有 监听 事件 如 表 2.4 所 示 。 
表 2.4 拖 放 相关 的 事件 
事件 名 说 明 
dragstart 开始 拖 放 
drag 拖 放 过 程 中 
dragenter 被 拖 放 元 素 进 入 本 元 素 范 围 内 
dragleave 被 拖 放 元 素 离开 本 元 素 范围 
dragend 拖 放 结束 
dragover 被 拖 放 元 素 在 本 元 素 上 移动 
drop 放置 拖 放 内 容 


HTML 5 中 要 让 元 素 具备 拖 放 功能 ， 首 先 需要 打开 元 素 draggable 属性 ， 设 置 为 ue， 表示 开 
启 元 素 拖 放 功 能 。 被 设置 的 元 素 可 以 是 网 页 上 任意 的 图 片 、 链 接 、 文 件 或 其 他 DOM 节点 。 下 面 
通过 一 个 示例 了 解 部 分 拖 放 事件 的 实际 使 用 情况 ， 代 码 如 下 : 
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将 文件 保存 为 html 格式 ， 并 使 用 Chrome 浏览 器 打开 ， 效 果 如 图 2.10 所 示 。 单 击 第 1 区 域 方 
块 ， 并 拖 放 至 第 2 区 域 ， 然 后 松 开 鼠标 ， 此 时 第 2 区 域 出 现 “ 我 是 数据 ”文字 ， 表 示 数 据 已 经 转 
移 完毕 ， 效 果 如 图 2.11 所 示 。 


ea CIDfle 六 |@ 三 < CIDfle 六 |@iE 


图 2.10 ” 拖 搜 示例 页 面 效果 图 2.11 拖 放 数据 内 容 


整个 示例 中 主要 运用 了 3 种 事件 : dragstart、dragover、drop。dragstart 事件 监听 拖 放 开始 ， 
在 拖 放 开始 时 , 示例 将 第 1 区 方块 元 素 的 数据 使 用 DataTransfer 对 象 的 setData 进行 保存 。dragover 
事件 用 于 监听 第 2 区 方块 ， 并 调用 事件 对 象 的 preventDefault 方法 ， 阻 止 浏览 器 元 素 默 认 事件 ， 这 
个 过 程 是 必须 的 ， 否 则 无 法 触发 drop 事件 。 最 后 监听 的 drop 事件 ， 用 于 监听 放置 内 容 结束 过 程 ， 
此 时 ， 从 之 前 存 入 DataTransfer 对 象 中 获取 数据 并 填充 至 第 2 方块 区 。 示 例 代码 非常 简单 ， 但 完 
成 了 一 个 了 不 起 的 功能 。 


2.3.3 ”看 看 这 些 带 拖 放 功能 的 网 站 


HTML 5 拖 搜 功能 的 强大 常常 体现 在 上 传 功能 的 应 用 上 ， 很 多 网 站 将 其 用 于 图 片上 传 。 大 家 
所 熟悉 的 新 浪 微 博 也 与 时 俱 进 ， 提 供 了 带 有 drag 和 drop 功能 的 图 片上 传 模块 。 
使 用 Chrome 浏览 器 打开 新 浪 微 博 ， 图 片上 传 功能 出 现在 发 送 微 博 区 域 ， 如 图 2.12 所 示 。 


26 


第 2 章 HTML 5 的 页 面 元 素 


表情 回 图 片 加 视频 回话 三 长 微 博 | 更 多 ~ 公开 ~ 


图 2.12 新 浪 微 博 图 片上 传 功能 


HTML 5 的 drop 功能 并 非 通过 图 2.12 第 头 所 示 的 操作 触发 ， 而 且 出 现在 微 博 内 容 输入 区 域 ， 
实现 了 用 户 可 直接 将 计算 机 本 地 的 图 片 文件 拖 放 至 该 区 域 ， 并 将 图 片上 传 。 首 先 ， 在 计算 机 本 地 
用 鼠标 选中 一 张 图 片 ， 将 图 片 拖 放 至 微 博 输 入 文本 框 区 域 ， 当 正在 拖 搜 图 片 的 鼠标 出 现在 文本 输 
入 区 域 时 ， 网 页 提示 用 户 上 传 准备 就 绪 ， 效 果 如 图 2.13 所 示 。 


局 十 掩 动 图 片 到 这 里 上 传 


表情 回 图 片 四 视频 四 话题 回 长 出 旺 | 更 多 ~ 
图 2.13 拖 搜 本 地 图 片 至 微 博文 本 输入 区 域 


松 开 拖 搜 图 片 的 鼠标 ， 图 片 文件 被 应 用 读 取 并 上 传 至 服务 器 ， 同 时 文本 框 下 方 出 现 图 片 缩 略 
图 ， 效 果 如 图 2.14 所 示 。 


来 情 加 图 片 四 祝 频 因 话 是 
本 地 上 传 


长 微 博 | 更 多 ~ 公开 ~ 


月 时 间 拓 序 ~ 
共 1 张 ， 还 能 上 传 8 张 《 按 住 中 | 同 选择 多 续 ) 


图 2.14 松 开 鼠标 完成 图 片上 传 


微 博 应 用 的 图 片上 传 ， 除 了 运用 上 一 示例 中 出 现 的 dragstart、dragover、drop 外 ， 还 运用 了 
dragenter、dragleave 事件 ， 以 实现 文件 移入 文本 输入 区 域 的 信息 提示 和 隐藏 。 

HTML 5 的 拖 放 功能 除了 出 现在 一 些 社交 的 网 站 以 外 ， 还 出 现在 一 些 提供 在 线 云 存 储 的 应 用 
上 ， 如 人 金山 快 盘 等 ， 为 一 些 高 级 浏览 器 用 户 提供 了 更 加 优秀 的 用 户 体验 。 
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2 .A 实例 : 构建 网 页 的 拖 放 应 用 


体验 了 HTML 5 拖 放 功能 给 网 站 应 用 带 来 的 优秀 用 户 体 验 ， 本 节 将 通过 一 个 例子 来 实现 模拟 
微 博 图 片 拖 放 的 功能 。 本 例 效果 如 图 2.15 所 示 。 


固 未 情 四 图 片 加 视频 四 话题 加 长 岗 博 | 更 多 ~ 


图 2.15 拖 放 实例 
本 例 使 用 效果 与 微 博 相 同 ， 下 面 通 过 代码 分 析 拖 放 功 能 的 具体 实现 : 
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本 例 主要 的 实现 逻辑 是 监听 HTML 5 拖 放 事件 ， 在 不 同 的 事件 周期 内 执行 对 应 的 操作 ， 拖 放 
操作 涉及 的 相关 事件 有 dragenter、dragover、dragleave、drop。 

dragenter 事件 在 每 次 文件 被 拖 放 进 入 元 素 范围 内 触发 ， 本 例 中 当 文件 被 拖 放 入 页 面 ， 则 给 文 
本 框 元 素 添加 textarea-enter 样式 ， 提 示 用 户 支持 文件 直接 拖 放 上 传 区 域 ， 如 图 2.13 所 示 。 

dragover 事件 当 被 拖 放 元 素 在 本 元 素 上 移动 时 触发 ， 要 实现 drop 拖 放 功 能 ， 监 听 该 事件 在 触 
发 时 阻止 元 素 默 认 事件 是 必 不 可 少 的 ， 和 否则 无 法 在 元 素 放置 时 触发 drop 事件 。 

dragleave 事件 在 每 次 文件 被 拖 放 离开 元 素 范围 时 人 触发， 本 例 将 该 事件 监听 添加 在 document 
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上 , 即 表示 当 文 件 离开 网 页 时 触发 , 触发 后 移 除 原本 被 添加 在 文本 框 元 素 上 的 textarea-enter 样式 ， 
表示 此 时 放置 元 素 将 无 法 实现 拖 放 功能 ， 需 再 次 拖 放 入 网 页 。 

drop 事件 是 实现 文件 最 终 上 传 的 关键 ， 事 件 在 文件 被 放置 后 触发 ， 本 例 中 当 文件 被 放置 于 页 
面 后 触发 drop 事件 ， 将 从 事件 对 象 的 dataTransfer 属性 中 获取 文件 列表 ， 并 循环 文件 列表 ， 演 染 
图 片 弹 出 上 传 提示 信息 框 。 

图 片 的 泻 染 用 到 了 自 定义 方法 render_one， 该 方法 接收 一 个 File 对 象 作为 参数 。 首 先 通过 文 
件 的 type 属性 判断 文件 类 型 ， 当 判断 为 图 片 文件 时 ， 表 示 该 文件 属于 应 用 上 传 图 片 的 范围 ， 此 时 
新 建 FileReader 实例 读 取 图 片 文件 内 容 ， 并 将 返回 的 base64 内 容 赋予 图 片 ， 插 入 弹出 的 浮动 提示 
信息 框 。 


匡 直 本 例 只 完成 了 网 页 前 端 效果 部 分 ， 不 涉及 后 端的 图 片 保存 功能 。 
2.5 小 


本 章 介绍 了 HTML 5 相 比 XHTML 出 现 的 一 些 变化 , 其 实 HTML 5 新 增 的 表单 元 素 不 仅仅 只 
有 本 章 介绍 的 这 么 多 内 容 ， 还 有 很 多 其 他 内 容 ， 读 者 可 参考 W3C 的 官方 文档 ， 因 为 有 些 元 素 很 
简单 ， 这 里 也 没有 举例 ， 希 望 读者 在 实践 中 学 习 和 总 结 更 多 的 HTML 5 元 素 和 技巧 。 
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HTML 5 不 仅 包括 简单 的 页 面 元 素 , 还 包括 CSS 3 和 JavaScript。 其 中 CSS 3 用 来 实现 页 面 的 
样式 设计 ，JavaScript 实现 一 些 前 端 与 后 台 的 交互 。 本 章 主要 通过 介绍 CSS 3 来 学 习 如 何 为 HTML 
5 页 面 进行 布局 。 


本 章 主要 内 容 : 

。 了 解 CSS 3 的 一 些 特色 

日 了 解 响应 式 设计 流行 的 原因 

® 使 用 Bootstrap 框架 提高 页 面 的 设计 效率 


可。 1 移动 页 面 的 样式 设计 利器 CSS 3 


CSS 3 是 层 登 样式 表 (Cascading StyleSheet) 的 第 3 个 版 本 。 在 设计 网 页 时 采用 CSS 3 技术 ， 
可 以 有 效 地 对 页 面 的 布局 、 字体 、 颜色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 本 节 将 要 学 习 CSS 
3 的 一 些 常 用 特效 和 属性 。 


3.1.1 个 性 化 的 字体 


一 般 情况 下 ， 开 发 者 会 使 用 CSS 中 的 font-family 属性 来 定义 字体 ,通常 会 根据 优先 级 定义 多 
个 。 如 果 用 户 的 计算 机 上 安装 了 font-family 中 定义 的 字体 ， 就 会 使 用 指定 的 字体 优先 使 用 定义 
时 顺序 靠 前 的 )。 如 果 没 有 定义 字体 。 或 者 定义 的 字体 客户 端 上 没有 安装 ， 就 会 显示 默认 的 字体 ， 
如 : 


上 面 这 段 代码 在 Windows 7 的 机 器 上 时 ， 页 面 将 采用 微软 雅 黑 字 体 来 展示 中 文 。 而 在 很 多 
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Linux 的 机 器 上 则 会 应 用 “WenQuanYi Micro Hei” 字 体 ， 因 为 那 台 机 器 没有 安装 微软 雅 黑 ， 但 是 
安装 了 文 泉 驿 字体 。 

如 果 想 使 用 一 些 个 性 化 的 字体 怎么 办 呢 ?@font-face 属性 可 以 帮助 我 们 ， 它 可 以 加 载 服务 器 
端的 字体 文件 ， 让 客户 端 显示 客户 端 所 没有 安装 的 字体 。@font-face 的 基本 语法 如 下 : 


在 @font-face 内 : 


font-family 指定 该 字体 的 名 称 以 便 引用 。 

src 指定 字体 文件 的 url 来 获取 服务 器 上 的 字体 。 
font-style 设置 文本 样式 。 

font-variant 设置 文本 是 否 大 小 写 。 

font-weight 设 置 文本 的 粗细 。 

font-stretch 设置 文本 是 否 横向 的 拉 伸 变形 。 
font-size 设置 文本 字体 大 小 。 


下 面 通过 一 个 示例 来 演示 如 何 使 用 自 定义 字体 。 首 先 下 载 一 个 字体 库 ， 保 存在 源 代码 的 font 


文件 夹 下 ， 字 体 库 的 扩展 名 为 .ttf。 详 细 的 示例 代码 如 下 : 
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本 例 首先 引用 了 一 个 自 定义 字体 xiang 〈 大 象 鼻 子 字体 )， 然 后 在 div 中 应 用 这 个 字体 ， 效 果 
如 图 3.1 所 示 。 


EEC 日 
这 里 是 默认 字体 
信里 依 帮 银 导 吾 字 体 


3.1 引用 自 定义 字体 


一 般 来 说 ,个 性 化 的 字体 需要 给 字体 的 版 权 方 付费 后 才能 使 用 。 


3.1.2 可 重复 使 用 的 背景 图 


在 CSS 3 出 现 之 前 ， 背 景 图片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 的 。 如 果 同 样 的 图 片 要 在 多 个 
不 同 的 地 方 作为 背景 的 话 就 必须 用 制图 工具 做 成 不 同 的 尺寸 , 这 一 方面 加 大 了 开发 者 的 工作 量 ， 
另 一 方面 也 占用 了 更 多 的 磁盘 空间 和 网 络 流量 。 在 CSS 3 中 ， 开 发 者 可 以 使 用 background-size 属 
性 来 规定 背景 图 片 的 尺寸 ， 这 样 就 可 以 在 不 同 的 环境 中 重复 使 用 背景 图 片 了 。 例 如 下 面 的 代码 : 


最 基本 的 用 法 当然 是 直接 使 用 长 度 单位 或 者 百分比 来 指定 背景 的 尺寸 ， 其 中 第 1 个 值 是 宽 
度 ， 第 2 个 值 是 高 度 。 如 果 只 设置 一 个 值 ， 则 高 度 默认 是 auto 。 

background-size 还 有 两 个 可 选项 : cover 和 contain 。 这 两 个 选项 都 不 会 造成 图 像 比例 失真 。 其 
中 cover 相当 于 宽度 等 于 元 素 宽度 、 高 度 设 为 auto 的 情况 ; 而 contain 则 相当 于 高 度 等 于 元 素 高 度 、 
宽度 设 为 auto 的 情况 。 下 面 举例 说 明 。 

首先 ， 先 设置 一 个 高 度 和 宽度 均 为 300 像素 的 容器 ， 然 后 将 一 张 1600x1200 尺寸 的 图 片 设置 
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为 图 片 的 背景: 


效果 如 图 3.2 所 示 ， 由 于 背景 取决 于 背景 图 片 的 尺寸 ， 但 背景 图 片 太 大 ， 导 致 实际 只 显示 了 
原 图 的 左上 角 的 部 分 。 


图 3.2 ”原始 图 片 背景 
下 一 步 加 上 background-size， 效 果 如 图 3.3 所 示 。 
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12 </style> 
13 <div class="container"></div> 


现在 读者 可 以 发 现 图 片 的 全 貌 展现 出 来 了 ， 宽 度 等 于 容器 宽度 ， 高 度 则 根据 原 图 比例 生成 ， 
最 终 得 到 和 原 图 比例 一 致 的 背景 图 片 ， 使 用 background-size: contain; 等 效 于 使 用 background-size: 
100% auto:;。 

如 果 想 占 满 容器 的 高 度 ， 则 只 需 设 置 background-size: auto 100%: 或 者 background-size: cover; 
即 可 ， 效 果 如 图 3.4 所 示 。 


3.3 background-size: contain 效果 图 3.4 ， background-size: cover 效果 


注意 : background-size 一 定 要 在 指定 图 片 后 设 定 ， 否 则 不 会 生效 。 


3.1.3 ”轻松 实现 文字 效果 
CSS 3 对 文字 也 增加 了 多 种 效果 ， 下 面 将 介绍 其 中 的 4 种 效果 。 
1. text-shadow 
用 于 设置 或 检索 对 象 中 文本 的 文字 是 否 有 阴影 及 模糊 效果 ， 语 法 如 下 : 


text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或 none | <color> [， 
<color> ]* 


通过 text-shadow 示例 查看 使 用 效果 ， 使 用 Chrome 浏览 器 打开 text-shadow.htm 文件 ， 效 果 如 


HTMLS5 


图 3.5 text-shadow 示例 效果 图 
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2. text-overflow 
用 于 设置 或 检索 是 否 使 用 一 个 省 略 标记 “.…” 表 示 对 象 内 文本 的 溢出 ， 语 法 如 下 : 


@ clip: 不 显示 省 略 标记 “.…”， 而 是 简单 的 裁 切 。 
e@ ellipsis: 当 对 象 内 文本 溢出 时 显示 省 略 标记 “.…”。 


下 面 创建 text-overflow.htm 页 面 ， 代 码 如 下 : 
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本 例 效果 如 图 3.6 所 示 。 
text-overflow : clip 
不 显示 省 略 标记 ， 而 是 简单 和 
text-overflow : ellipsis 
当 对 象 内 文本 溢出 时 显示 … 
图 3.6 textroverflow 示例 效果 图 
3. word-wrap 


用 于 检索 或 设置 对 象 中 的 单词 之 间 间 隔 ， 语 法 如 下 : 


@ normal: 控制 连续 文本 换行 。 
e break-word: 内 容 将 在 边界 内 换行 。 


4. word-break 
用 于 断 行 的 规则 ， 语 法 如 下 : 


。 normal: 使 用 浏览 器 默认 的 换行 规则 。 
® break-all: 允许 在 单词 内 换行 。 
。 keep-all: 只 能 在 半角 空格 或 连 字符 处 换行 。 


3.1.4 ”设计 边框 特效 


CSS 中 的 border 主要 用 于 处 理 边框 效果 , 经 常用 在 网 页 中 。 新 版 的 CSS 3 对 Border 属性 添加 
了 更 加 丰富 的 功能 ， 本 节 将 介绍 它 的 几 种 功能 属性 : 


1. border-colors 


border-colors 用 于 设置 或 检索 对 象 边框 的 多 重 颜色 ，CSS 2 中 border-colors 已 经 出 现 , 但 CSS 
3 中 的 可 以 制作 渐变 边框 ， 不 过 目前 只 有 Firefox 对 border-colors 支持 比较 完整 。 
下 面 创建 一 个 页 面 border-colors.htm: 
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本 例 效果 如 图 3.7 所 示 ， 目 前 只 能 在 Firefox 中 打开 。 


HTELS 


图 3.7 ”border-colors 示例 效果 
2. border-radius 
border-radius 用 于 设置 或 检索 对 象 使 用 圆 角 边框 ， 这 个 属性 应 该 是 目前 出 镜 率 最 大 的 CSS 3 
属性 ， 也 是 目前 各 大 网 站 最 常用 的 CSS 3 属性 ， 语 法 如 下 : 


下 面 创建 一 个 border-radius.htm 页 面 ， 代 码 如 下 : 


效果 如 图 3.8 所 示 。 
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TRLS 


3.8 border-radius 示例 效果 
3. border-image 


borderimage 用 于 设置 或 检索 对 象 的 边框 样式 使 用 图 像 来 填充 ， 一 直 以 来 边框 的 填充 只 能 使 
用 颜色 来 进行 ，CSS 3 在 这 点 上 做 了 较 大 的 突破 ，border-image 可 以 被 拆 解 为 另外 5 种 属性 : 


border-image-source: 用 于 设置 引入 图 片 的 地 址 。 

border-image-slice: 用 于 切割 引入 的 图 片 。 

border-image-width: 设置 边框 的 宽度 。 

border-image-repeat: 设置 图 片 的 排列 方式 ， 如 stretch、repeat、round。 
border-image-outset: 设置 边框 图 像 超过 边框 盒 的 偏 移 量 。 


border-image 属性 语法 如 下 : 


border-image 的 应 用 效果 如 图 3.9 所 示 。 
和 
:| 
aed 
图 3.9 ”border-image 示例 效果 
4. box-shadow 
box-shadow 用 于 向 边框 添加 1 个 或 多 个 阴影 ， 通 过 逗号 分 隔 阴影 列表 ， 语 法 如 下 : 


Es 
各 属性 值 说 明 如 下 : 


h-shadow: 水 平 阴影 的 位 置 ， 允 许 负 值 。 
V-shadow: 垂直 阴影 的 位 置 ， 允 许 负 值 。 

blur: 模糊 距离 ， 可 选 。 

Spread: 阴影 的 尺寸 ， 可 选 。 

color: 阴影 的 颜色 ， 可 选 。 

inset: 将 外 部 阴影 ( outset ) 改 为 内 部 阴影 ， 可 选 。 
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box-shadow 的 应 用 效果 如 图 3.10 所 示 。 


图 3.10 ”box-shadow 示例 效果 


3.1.5 ”实现 文本 的 多 列 布局 


文本 的 多 列 布局 ， 是 CSS 3 增加 的 1 个 多 列 布局 模块 ， 排 版 布局 是 CSS 中 非常 重要 的 功能 ， 
在 报刊 、 杂 志 的 布局 中 尤为 重要 ， 多 列 提供 了 以 下 几 类 功能 : 

@ 列 数 和 列 宽 : column-count、column-width。 

ee 列 的 间距 和 分 列 样式 ; column-gap. column-rule-color, column-rule-style、 column-rule-width、 

column-rule。 

e@ 列 的 分 栏 符 : break-before、break-after、break-inside。 

ee 跨越 列 : column-span。 

e 填充 列 : column-fill。 


创建 Multiple Columns.htm 页 面 ， 代 码 如 下 : 
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本 例 效果 如 图 3.11 所 示 。 


寺 漆 俗称 树 挂 ， 是 可 遇 白色 不 透明 的 粒 : 漆 难 得 ， 但 我 国 东北 地 
不 可 求 的 自然 奇观 。 走 沉积 物 。 图 末 形 成 需要 区 的 吉林 市 因 其 特殊 的 
诬 非 洒 非 二， 而 是 由 于 气温 很 低 ， 而 且 水 汽 又 地 理 环 条 件 却 
ly 很 充分 ， 同 时 能 具备 这 造就 了 相当 于 “可 允 可 


未 结 亲 的 震 滴 附 风 | 两 个 形成 寺 洒 的 极 重 要 。 | 求 ” 的 中 国 四 大 自然 厅 
而 自然 观 之 一 的 “ 吉 条 香 
票 闵 粘 的 结果 ， 表 现 为 。 | 件 二 是 难得 。 美丽 的 算 

3.11 Multiple Columns 示例 效果 


3.1.6 ”转换 特效 


CSS 3 Transform 包含 旋转 (rotate)、 扭 曲 (skew)、 缩 放 (scale)、 移 动 〈translate) 和 矩阵 变 
形 (matrix)， 语 法 如 下 : 


| Sam ln | | | 
当 使 用 多 个 ransform 属性 时 ， 需 要 使 用 空格 符号 二 开 ， 各 属性 说 明 如 下 : 


@ rotate: 通过 设置 角度 参数 给 元 素 指定 1 个 2D 旋转 ， 正 值 为 顺 时 针 ， 负 值 为 逆 时 针 。 

@ ”skew: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 扭曲 变形 ， 即 XX 轴 和 YY 轴 同 时 按 一 定 的 
角度 值 进行 扭曲 变形 ， 同 时 还 支持 使 用 skewX 和 skewY 进行 单个 方向 的 捏 曲 变形 。 

@ scale: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 缩放 ， 同 时 还 支持 使 用 scaleX 和 scaleY 
进行 单个 方向 的 缩放 。 

® translate: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 移动 ， 同 时 还 支持 使 用 translateX 和 
translateY 进行 单个 方向 的 移动 。 

e_ matrix: 以 1 个 含 6 位 值 的 变换 珑 阵 的 形式 指定 1 个 2D 变换 ， 该 属性 涉及 数学 中 的 算 阵 
变化 ， 可 以 说 该 方法 是 transform 转换 属性 的 根基 ， 一 切 的 Transform 使 用 都 是 由 matrix 
变化 而 来 。 


在 使 用 transform 属性 前 ， 还 有 一 个 非常 关键 的 属性 transform-origin， 用 于 设置 每 次 转化 前 的 
基点 位 置 ， 默 认 基点 位 置 为 中 心 位 置 ， 参 数 可 以 使 用 百 分 值 、px 或 者 方向 值 (如 left、right、top、 
center 和 bottom) 

创建 一 个 Transform.htm 页 面 ， 代 码 如 下 : 


台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


本 例 效 果 如 图 3.12 所 示 。 


图 3.12 ”Transform 示例 效果 
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3.1.7 ”过 渡 特 效 


transition 将 CSS 的 属性 值 在 一 定 的 时 间 区 域内 平滑 的 过 渡 用 于 制作 各 种 动态 的 效果 比如 
当 和 鼠标 移入 元 素 时 ， 使 得 元 素颜 色 发 生 渐变 ， 语 法 如 下 : 


各 属性 说 明 如 下 : 

etransition-property: 指定 当前 元 素菜 个 属性 改变 时 执行 的 过 渡 效 果 。 

e transition-duration: 指定 转化 过 程 的 持续 时 间 ， 单 位 为 s ( 秒 ) 。 

etransition-timing-functiom 根据 时 间 的 推进 改变 属性 值 的 变换 速率 ， 有 6 种 值 ， 分 别 为 ease 
(逐渐 变化 ) 、linear ( 匀速 ) 、ease-in (加速) 、ease-out (减速 ) 、ease-in-out ( 先 加 速 
后 减速 ) 、cubic-bezier ( 自 定 义 贝 塞 尔 曲线 值 ) 。 

etransition-delay: 设置 延 后 执行 时 间 ， 即 当 元 素 属性 值 发 生 改 变 后 多 少时 间 开 始 执行 ， 单 
位 为 sS( 秒 ) 


下 面 使 用 transition 创建 一 个 页 面 Transition.htm， 代 码 如 下 : 
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本 例 效 果 如 图 3.13 所 示 ， 将 鼠标 移入 方 框 区 域内 ， 图 中 的 两 个 圆 形 各 自 的 位 置 、 颜 色 、 形 状 
发 生变 化 ， 变 化 后 的 效果 如 图 3.14 所 示 。 


oo| | 


图 3.13 Transition 示例 效果 图 3.14 ”Transition 示例 变化 后 


可 .2 响应 式 Web 设计 


响应 式 Web 设计 在 过 去 一 段 时 间 内 非常 流行 ， 主 要 是 因为 用 户 使 用 的 设备 越 来 越 分 散 ， 我 们 
设计 的 页 面 要 尽 可 能 地 保证 在 任何 设备 上 都 能 保持 原来 的 布局 ， 这 就 用 到 了 响应 式 Web 设计 。 


3.2.1 什么 是 响应 式 Web 设计 
页 面 可 以 根据 用 户 的 设备 尺寸 或 浏览 器 的 窗口 尺寸 来 自动 地 进行 布局 的 调整 ， 这 就 是 响应 式 


布局 。 在 这 个 移动 互联 兴起 的 时 代 ， 响 应 式 布局 占据 着 越 来 越 重 要 的 地 位 。 图 3.15 是 一 个 直观 的 
响应 式 布局 设计 示意 图 。 
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A C [| 
| 
IB | 


图 3.15 ”响应 式 布局 设计 示意 图 

近年 来 ， 移 动 互联 网 发 展 势头 迅猛 ， 尤 其 是 高 性 能 智能 手机 和 平板 的 普及 ， 使 得 在 移动 设备 
上 浏览 绚丽 的 页 面 成 为 了 可 能 (相对 于 曾经 的 WAP 手机 站 来 说 )。 响 应 式 设计 越 来 越 流行 ， 预 计 
在 不 久 的 将 来 ， 大 部 分 的 网 站 都 会 拥抱 移动 ， 响 应 式 页 面 会 成 为 主流 选择 。 

响应 式 布局 的 设计 原则 如 下 : 

1. 小 屏幕 只 显示 高 优先 级 内 容 

在 响应 式 网 页 设计 中 ， 切 换 到 小 屏幕 移动 设备 时 ， 有 时 候 需要 对 页 面 内 容 进行 删 碱 ， 按 照 优 
先 级 显示 内 容 ， 只 显示 高 优先 级 内 容 是 原则 之 一 。 在 屏幕 较 小 的 移动 设备 上 ， 应 该 优先 考虑 主要 
内 容 并 移 掉 那 些小 的 栏目 。 在 顶部 显示 高 优先 级 内 容 ， 即 把 最 重要 的 内 容 放置 在 项 部。 导航 是 否 
- 定 要 出 现在 页 头 或 者 重新 布局 在 页 尾 ， 都 要 依 网 站 具体 规划 去 考虑 。 

2. 提供 潮 本 [友好 的 手指 操作 链接 

尤其 在 手机 设备 上 ， 可 点 击 操作 的 区 块 不 宜 过 小 ， 引 导 要 清晰 强烈 ， 不 忽略 任何 一 款 设备 。 

3. 体验 的 一 致 性 

要 让 用 户 在 不 同 的 设备 上 保持 对 同一 页 面 拥 有 相同 的 视觉 和 感觉 ， 这 也 遵循 交互 设计 体验 一 
致 性 的 原则 。 读 者 可 以 参考 Oliver Russell 网 站 ， 它 是 一 个 设计 非常 灵活 的 网 站 ， 在 不 同 的 屏幕 分 
辩 率 下 可 以 保持 一 致 的 视觉 和 感受 。 

4. 考虑 操作 移动 设备 的 习惯 


大 部 分 用 户 习 惯 于 右手 点 击 操作 ， 左 手 负责 握 住 设备 。 右 侧 的 导航 列表 既 方便 右手 的 点 击 ， 
又 可 以 避免 被 握 着 设备 的 左手 不 小 心 触 碰 到 。 
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3.2.2” 流 式 布局 


对 于 流 式 布局 来 说 ， 我 们 可 以 通过 直接 定义 模块 和 模块 间距 的 百分比 的 方式 来 实现 ， 对 于 复 
杂 页 面 来 说 ， 把 工作 交 给 更 规范 、 更 快捷 的 栅 格 系统 则 是 更 好 的 选择 。 

和 传统 的 固定 布局 不 同 的 是 ， 流 式 布局 无 需 再 去 考虑 container 的 宽度 选择 ， 在 栅 格 计算 上 ， 
直接 将 container 的 宽度 值 设 为 100% 进 行 计算 ， 计 算 方 法 则 和 固定 栅 格 是 一 致 的 。 

如 果 需 要 构建 一 个 12 列 的 流 式 栅 格 系统 ， 列 + 覃 的 宽度 为 : 


如 果 列 宽 和 覃 宽 的 比 为 3:1 的 话 ， 那 么 槽 的 宽度 为 : 


N 列 的 宽度 为 ; 


下 面 我 们 以 一 段 Bootstrap 2 框架 的 流 式 布局 代码 为 例 ， 了 解 一 下 流 式 布局 : 
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可 以 看 到 Bootstrap 计算 值 和 笔者 得 出 的 计算 结果 并 不 一 致 ， 这 是 由 于 Bootstrap 对 第 一 个 子 
元 素 的 margin-left 设置 为 0 导致 的 。 


观察 代码 可 以 发 现 类 似 *width: 23.351063829787233%6; 这 样 的 属性 定义 ， 原 因 是 IE 6/7 下 宽度 
为 100% 时 是 包含 了 外 层 滚动 条 的 宽度 的 ， 因 此 和 需要 有 针对 性 地 作出 兼容 设置 。 


3.2.3 ”媒体 查询 


实现 页 面 的 响应 式 设计 ， 从 技术 上 要 如 何 实现 呢 ? CSS 3 提供 了 媒介 查询 的 功能 帮助 我 们 实 
现 这 个 目标 。 

在 CSS 2 标准 中 就 已 经 可 以 根据 不 同 的 媒介 类 型 (Media Type) 来 设置 不 同 的 输出 样式 了 。 
而 CSS 3 提供 的 @media 使 开发 者 有 能 力 在 相同 的 样式 表 中 ， 针 对 不 同 的 媒介 来 使 用 不 同 的 样式 
规则 。 可 以 将 @media 看 成 是 添加 了 CSS 属性 判断 的 Media Type， 其 基本 语法 如 下 : 


这 段 代码 定义 了 小 于 600 像素 的 窗口 所 应 用 的 样式 。 前 半 部 分 @media screen 和 Media Type 
的 语法 是 一 样 的 ， 一 般 来 说 选择 screen 或 only screen， 因 为 所 有 现代 的 智能 手机 、 平 板 、PC 在 类 
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型 上 都 是 screen。 后 半 部 分 使 用 and 作为 条 件 添 加 符号 ， 可 以 使 用 多 个 and 添加 多 个 条 件 : 


这 段 代 码 表示 宽度 在 600~900 像素 之 间 的 窗口 应 用 该 样式 。width 作为 条 件 是 最 常用 、 最 基 
本 的 ， 根 据 我 们 的 需求 ， 还 可 以 限定 更 多 的 条 件 以 更 精确 地 对 设备 进行 适 配 。 比 如 通过 orientation 
来 判断 设备 翻转 、 通 过 device-aspect-ratio 来 判断 屏幕 的 纵横 比 等 。 表 3.1 列 出 了 可 以 使 用 的 一 些 
判断 条 件 。 


表 3.1 适 配 设备 的 判断 条 件 


视觉 屏幕 /触摸 设备 


视觉 屏幕 /触摸 设备 
视觉 屏幕 /触摸 设备 
图 介质 类 型 


光学 习 语 法 肯定 是 不 够 的 ， 下 面 来 看 一 个 流行 的 响应 式 开发 框架 中 媒介 查询 的 应 用 。 
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可 以 发 现 ， 响 应 式 设计 的 栅 格 系统 实际 就 是 在 流 式 栅 格 系统 的 基础 上 添加 了 媒介 查询 ， 使 之 
更 加 灵活 。 

如 果 只 使 用 small-n 系列 栅 格 ， 实 际 上 和 使 用 流 式 布局 的 栅 格 系统 没有 任何 区 别 。 响 应 式 栅 
格 系统 实际 就 是 告诉 浏览 器 当前 宽度 下 应 当 使 用 的 样式 。 比 如 下 面 的 代码: 


如 果 是 小 窗口 ， 那 么 该 <div> 元 素 就 占据 100% 的 宽度 。 如 果 是 中 等 大 小 窗口 ， 则 只 占据 
16.66667% 的 宽度 。 


3.2.4 Twitter Bootstrap 理念 


Bootstrap 是 Twitter 公司 于 2011 年 8 月 开源 的 整体 式 前 端 框架 , 它 由 Twitter 的 设计 师 Mark Otto 
和 Jacob Thomton 合作 开发 。 经 过 短 短 几 个 月 的 时 间 就 红 遍 全 球 ， 大 量 Bootstrap 风格 的 网 站 出 现 
在 互联 网 的 信息 浪潮 之 中 ， 而 应 用 更 为 广泛 的 是 它 的 后 台 管 理 界面 。 笔 者 近 两 年 接触 的 所 有 互联 
网 项 目的 后 台 均 采用 了 Bootstrap 进行 构建 。 

Bootstrap 的 官方 网 站 地 址 是 http://getbootstrap.com/， 界 面 如 图 3.16 所 示 。 可 以 在 官网 下 载 最 
新 的 版 本 和 详细 的 使 用 说 明文 档 。 目 前 国内 也 有 不 错 的 Bootstrap 汉化 文档 ， 地 址 是 
http://www.bootess.com/。 
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Bootstrap 


Slele] ttl 


Sleek, intuitive, and powerful mobile first front-end framework for 
faster and easier web development 


Download Bootstrap Download source 


图 3.16 Bootstrap 官网 

Bootstrap 的 优势 总 结 如 下 : 

1. 功能 温 大 和 样式 美观 的 强 强 联合 

Bootstrap 包含 了 绝 大 多 数 的 常用 页 面 组 件 和 动态 效果 ， 并 且 它 是 由 专业 的 网 页 设计 师 精心 制 
作 的 , 足够 的 美观 精致 , 即使 是 一 个 没有 专业 网 页 设计 师 的 团队 也 可 以 利用 Bootstrap 快速 地 构建 
简洁 美观 的 页 面 ， 而 在 Bootstrap 出 现 之 前 ， 快 速 和 美观 往往 是 互 斥 的 。 

一 些 大 型 互联 网 公司 (如 Google、 雅虎、 新 浪 、 百 度 等 ) 都 会 有 强大 的 内 部 通用 样式 库 和 
JavaScript 组 件 库 , 但 它们 一 方面 是 不 开源 的 , 另 一 方面 大 部 分 库 都 带 有 这 些 公司 的 特定 风格 和 烙 
印 ， 即 使 开源 ， 应 用 面 也 并 不 广泛 。 

2. 简单 易 用 ， 文 档 丰 富 

Bootstrap 使 用 起 来 非常 简单 ， 并 且 有 非常 详尽 的 文档 (如 图 3.17 所 示 )， 甚 至 可 以 不 用 查看 
代码 ， 只 需 根 据 文档 当做 “ 黑 盒 ” 来 使 用 ， 就 可 以 构建 出 相当 漂亮 的 页 面 效果 ， 而 且 样式 类 的 语 
义 性 非常 好 ， 根 据 英文 单词 的 意义 很 容易 记忆 。 
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Button toolbar 


Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components,. 


<div class="btn-toolbar” role="toolbar"> 
<div class="btn-group">...</div> 
<div class="btn-group">...</div> 
<div class="btn-group">...</div> 
</div> 


Sizing 


Instead of applying button sizing classes to every button in a group, just add .btn-group-* tothe .btn-group 


Left Middle Right 


图 3.17 ”Bootstrap 的 文档 样 例 
3. 高 度 可 定制 


Bootstrap 的 一 大 优点 是 它 极 佳 的 可 定制 性 ， 一 方面 可 以 有 选择 性 地 只 下 载 自己 需要 的 组 件 ， 
另 一 方面 在 下 载 前 可 以 调配 参数 〈 如 图 3.18 所 示 ) 来 匹配 自己 的 项 目 。 由 于 Bootstrap 是 完全 开 
源 的 ， 使 用 者 也 可 以 根据 自己 的 需要 来 更 改 代码 。 


Bootstrap Cl 
@brand-success @brand-info 
LESS components 
jQuery plugins @brand-waming 
LESS variables #fead4e 
Basics 
Buttons Body scaffolding 
Form states 
body: nk-color 
Alerts @ @ 
Navbar 性 fff ae 
Nav Background color for <body> Global textual link color 
Tables 
@text-color @link-hover-color 
Forms 
Dropdowns Sgr dark darken(@link-color, 15%) 
Panels and wells Global text color on <body> Link hover color set via darken() funcion 
Accordion 
Badges Typography 


图 3.18 ”定制 化 选择 界面 


4. 丰富 的 生态 图 
由 于 Bootstrap 如 此 优秀 , 在 Web 开发 领域 出 现 了 很 多 基于 Bootstrap 的 插件 , 一些 集成 的 CMS 
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也 开始 应 用 Bootstrap。 例如 图 标 字 体 插件 Font Awesome、 富 文本 编辑 器 插件 bootstrap-wysiHTML 
5、Rails 插件 bootstrap-sass 等 等 ， 还 有 很 多 基于 Bootstrap 的 “皮肤 ”插件 ， 弥 补 了 Bootstrap 流 
行 后 同 质 化 严重 的 问题 ， 例 如 基于 Window Metro 风格 的 Flat UI、 基 于 Google 风格 的 Google 
Bootstrap。 
国内 外 都 有 Bootstrap 的 免费 CDN 服务 ， 这 更 推动 了 Bootstrap 的 流行 ， 由 于 国内 无 法 使 用 
Google 的 CDN， 建 议 使 用 百度 CDN 服务 : 

未 压缩 版 本 : 


压缩 后 的 版 本 : 


5. 布局 兼容 性 良好 


虽然 Bootstrap 采用 了 很 多 CSS 3 的 效果 ， 但 是 在 布局 上 可 以 兼容 到 IE 7。 使 用 Bootstrap 可 
以 很 大 程度 上 避免 在 IE 下 的 布局 错乱 。 当 然 ， 在 较 老 版 本 的 正 浏览 器 下 ， 效 果 会 打 一 些 折扣 。 


3.2.5 将 Bootstrap 应 用 到 自己 的 项 目 中 


应 用 Bootstrap 需要 使 用 的 是 编译 好 的 CSS 文件 。 官 方 网 站 提供 两 个 下 载 入 口 ， 一 个 是 首页 
大 大 的 Download Bootstrap 按钮 , 另 一 个 是 首页 导航 栏 的 Customize, 这 里 可 以 提供 定制 化 的 下 载 。 
一 般 情况 下 ， 建 议 直接 全 部 下 载 ， 在 开发 基本 完成 后 ， 再 考虑 根据 实际 的 使 用 情况 进行 定制 化 下 
载 ， 以 缩减 前 端 代码 。 

在 项 目 中 引入 Bootstrap 的 方法 很 简单 和 引入 其 他 CSS 或 JavaScript 文件 一 样 使 用 <script> 
标签 引入 JavaScript 文 伟 使 用 <link> 标 签 引 入 CSS 文 件 不 过 需要 注意 的 是 Bootstrap 的 JavaScript 
效果 都 是 基于 jQuery 的 因此 需要 使 用 Bootstrap 的 JavaScript 动态 效果 的 话 必须 先 引 入 jQuery 
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画 JavaScript 文件 放 在 文档 尾部 有 助 于 提高 加 载 速度 。 


引入 Bootstrap 还 可 以 使 用 第 三 方 的 CDN 服务 ，Bootstrap 2 版 本 可 以 使 用 百度 的 CDN 服务 ， 
网 址 是 http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs。Bootstrap 3 版 本 则 建议 使 用 
Bootstrap 中 文 网 提供 的 CDN， 网址 是 http://open.bootcss.com/。 当 然 如 果 是 做 国外 的 项 目 ， 首选 则 
是 Google 的 CDN 服务 了 。 


可 .本 实例 : 应 用 媒介 查询 制作 响应 式 导航 栏 


本 章 将 构建 一 个 简单 的 导航 实例 来 了 解 一 下 媒介 查询 的 具体 应 用 。 


一 般 在 实际 应 用 中 ， 只 有 简单 页 面 才 会 手写 媒介 查询 ， 复 杂 页 面 往往 会 采用 名 种 响应 式 的 框 


架 来 简化 和 规范 开发 。 


(1) 我 们 需要 添加 几 个 <meta> 标 签 。 


(2) 为 了 让 IE 9 以 下 浏览 器 能 够 支持 响应 式 ， 可 以 加 上 一 个 兼容 性 的 JavaScript 库 ， 目 前 比 
较 流行 的 有 media-queries,js 或 者 respond.js。 


(3) 构建 html 结构 并 为 其 编写 样式 。 
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这 样 ， 一 个 简单 的 响应 式 导 航 栏 就 完成 了 。 在 PC 上 的 显示 效果 如 图 3.19 所 示 ， 在 手机 上 的 
效果 如 图 3.20 所 示 。 


图 3.19 PC 上 的 导航 栏 
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图 3.20 手机 上 的 导航 栏 


小 结 


本 章 的 内 容 虽 然 不 多 ， 但 包括 了 HTML 5 设计 中 的 几 个 大 的 技术 点 ， 如 CSS 3、 响 应 式 布局 
和 Bootstrap 框架 。 通 过 CSS 3 技术 , 我 们 可 以 学 习 页 面 设计 中 一 些 元 素 的 样式 设计 。 通过 响应 式 
布局 ， 我 们 可 以 设计 一 个 跨 平台 的 页 面 ， 而 且 能 保证 页 面 在 不 同 设备 的 浏览 器 下 面 还 保持 应 该 有 
的 布局 。 通 过 Bootstrap， 我 们 可 以 提高 页 面 设计 的 速度 ， 降 低 设计 难度 。 
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第 4 章 
< HTML 5 的 地 理 位 置 定位 > 


地 理 定位 是 HTML 5 提供 的 最 令 人 激动 的 特性 之 一 ， 时 下 到 处 都 是 LBS 一 一 基于 位 置 的 服务 

(Location Based Service) 。HTML 5 的 地 址 位 置 特性 允许 我 们 用 相对 简单 的 JavaScript 代码 ， 创 

建 出 能 确定 用 户 地 理 位 置 详细 信息 的 Web 应 用 ， 包 括 经 纬度 以 及 海拔 等 ， 还 能 设计 出 一 些 甚至 能 
通过 监控 用 户 位 置 随时 间 的 移动 来 提供 导航 功能 的 Web 应 用 。 


本 章 主 要 内 容 包 括 : 

e 了 解 HTML 5 中 的 Geolocation API 
@ 学 习 有 关 经 度 和 纬度 的 知识 

@ 使 用 API 获取 地 理 位 置 

e@ 定位 手机 的 地 理 位 置 


复习 一 下 纬度 和 经 度 


纬度 和 经 度 是 一 种 利用 三 度 空 间 的 球面 来 定义 地 球 上 空间 的 球面 坐标 系统 ， 能 够 标示 地 球 上 
的 任何 一 个 位 置 。 

谈 到 经 纬度 ， 可 以 追溯 到 公元 前 344 年 ， 亚 历 山大 渡海 南侵 ， 随 军 的 地 理学 家 尼 尔 库 斯 沿途 
搜索 材料 ， 准 备 绘制 一 幅 世 界 地 图 。 尼 尔 库 斯 发 现 沿 着 亚历山大 东 征 的 路 线 ， 由 西向 东 ， 无 论 季 
节 变 换 与 日 照 长 短 都 很 相仿 。 于 是 第 一 次 在 地 球 上 划 出 了 一 条 纬 线 ， 这 条 线 从 直布罗陀 海峡 起 ， 
沿 着 托 鲁 斯 和 喜马拉雅 山脉 一 直到 太平 洋 。 

经 线 又 称 为 子午 线 ， 定 义 为 地 球 表面 连接 南北 两 极 的 半圆 弧 。 任 何 两 根 经 线 的 长 度 相 同 ， 相 
交 于 南北 两 极 ， 每 根 经 线 都 有 相对 应 的 值 ， 称 为 经 度 。 纬 线 定义 为 地 球 表 面 某 个 点 随 着 地 球 自转 
所 形成 的 轨迹 ， 任 何 一 根 纬 线 都 是 圆 形 而 且 两 两 平行 。 

经 1884 年 国际 会 议 协商 ,决定 以 通过 英国 伦敦 格林 尼 治 天 文 台 ( 原 址 ) 的 经 线 为 起 始 线 ， 称 
本 初子 午 线 。 以 本 初子 午 线 为 起 点 ， 向 东 为 东经 度 (E)， 向 西 为 西 经 度 (W)。 经 度 共 360” ， 本 
初子 午 线 为 0” 经线， 东西 经 度 各 为 180”， 东 、 西 经 180” 经 线 为 同一 条 经 线 , 统称 180” 经 线 。 

纬度 以 赤道 为 起 点 ， 赤 道 以 北 为 北纬 度 (N)， 赤 道 以 南 为 南 纬度 〈S)。 赤 道 是 0 纬度 ， 北 
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纬度 的 最 大 值 是 90”， 即 北极 点 ; 南 纬度 的 最 大 值 为 90”， 即 南极 点 。 
下 面 通过 图 4.1 来 了 解 地 球 经 纬度 。 


图 4.1 地 球 经 纬度 


4 .2 了 解 Geolocation API 


开发 者 借助 Geolocation API 可 以 开发 基于 位 置信 息 的 高 级 应 用 , 将 虚拟 世界 和 现实 世界 整合 
在 一 起 。 本 节 主 要 介绍 Geolocation API 的 一 些 基础 知识 。 


4.2.1 ”Geolocation 提供 的 方法 

在 HTML 5 中 ，Geolocation 作为 navigator 的 一 个 属性 出 现 ， 它 本 身 是 一 个 对 象 ， 拥 有 3 个 
方法 : 

egetCurrentPosition: 获取 用 户 当前 的 位 置信 息 ， 只 能 获取 1 次 。 

e@ watchPosition: 循环 检测 用 户 的 地 理 位 置 ， 只 要 发 生变 化 ， 浏 览 器 就 会 触发 watchPosition 


函数 。 
e clearWatch: 清除 1 个 用 于 对 用 户 位 置 的 循环 监视 。 


getCurrentPosition 和 watchPosition 的 用 法 类 似 ， 语 法 如 下 : 
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geolocationSuccess 当 获取 经 纬度 信息 成 功 时 触发 ， 回 调 函数 接收 1 个 带 有 用 户 信息 的 对 象 字 
面 量 ， 包 含 两 个 属性 coords 和 timestamp， 其 中 coords 属性 对 象 包 含 以 下 7 个 属性 值 : 


二 
. 
e@ longitude: 经 度 

e@ altitude: 海拔 ， 海 平面 以 上 以 米 计 
e@ altitudeAcuracy: 海拔 的 精确 度 

@ heading: 朝向 ， 从 正 北 开始 以 度 计 
@ speed: 速度 ， 以 米 /每 秒 计 


geolocationError 为 错误 回调 函数 ， 当 无 法 获取 用 户 经 纬度 时 ， 浏 览 器 会 触发 该 函数 ， 并 传 回 
错误 对 象 ， 具 体 可 能 出 现 的 错误 情况 可 以 参考 文档 
http://dev.w3.org/geo/api/spec-source.html#permission_denied_error。 

geolocationOptions 参数 为 自 定义 的 对 象 字面 量 ， 拥 有 3 个 自 定义 属性 ， 如 下 : 


。 enableHighAccuracy: 返回 更 加 精确 的 用 户 信 息 数据 默认 为 false 关闭 ， 如 果 设置 为 true， 
浏览 器 将 消耗 更 多 的 时 间 用 于 获取 信息 ， 在 移动 设备 上 使 用 会 消耗 更 多 的 电量 。 

e timeout: 浏览 器 获取 用 户 位 置信 息 的 超时 时 间 ， 默 认为 0。 

e maximumAge: 浏览 器 获取 用 户 位 置信 息 后 的 缓存 时 间 ， 单 位 为 毫秒 ， 默 认为 0， 表 示 每 
次 都 重新 获取 。 


下 面 是 一 段 最 简单 的 获取 地 理 位 置 的 代码 : 


4.2.2 ”Geolocation 提供 的 地 理 数 据 
HTML 5 通过 Geolocation 接口 获取 用 户 地 理 位 置信 息 , 开发 者 不 需要 关心 接口 是 在 什么 设备 
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上 、 使 用 什么 底层 技术 去 实现 ， 只 需要 会 简单 的 调用 即 可 。 
一 般 来 说 ， 浏 览 器 可 以 从 设备 中 获取 以 下 数据 来 源 : 


ee IP 地 址 

e GPS ( Global positioning System， 即 全 球 定 位 系统 ) 

。 RFID (Radio Frequency IDentification， 即 射频 识别 ) ， 如 汽车 防盗 和 无 钥匙 开门 系统 的 应 
用 、 门 禁 和 安全 管理 系统 

e Wi-Fi 地 址 

e GSM 或 CDMA 手机 的 ID 

@@ 用 户 自 定 义 的 地 理 位 置 数据 


每 种 获取 方式 由 于 原理 不 同 ， 所 以 在 精准 度 上 也 会 产生 差异 ， 比 如 使 用 笔记 本 连接 Wi-Fi 上 
网 获取 的 经 纬度 信息 与 使 用 手机 在 GSM 上 获取 的 经 纬度 信息 很 可 能 会 不 完全 一 致 。 下 面 通过 比 
对 各 项 技术 的 优 缺 点 让 读者 能 够 更 加 全 面 地 了 解 差异 ， 表 4.1 列 出 了 定位 数据 来 源 的 优 缺 点 。 


表 4.1 定位 数据 来 源 优 缺 点 


定位 娄 据 来 源 EE 

下 地 直 大 和 

Gps 定位 时 间 长 、 耗 电大 、 室 内 效果 差 
RFID 接 入 设备 少 

Wi 需要 有 无 线 接点 

基于 手机 需要 有 手机 网 络 ， 且 基站 点 要 多 
用 户 自 定义 当 用 户 位 置 发 生变 化 时 不 准确 


HTML 5 通过 Geolocation 除了 能 获取 到 经 纬度 坐标 外 ， 还 能 提供 位 置 坐标 的 精准 度 。 对 于 某 
些 较 高 级 的 硬件 设备 ,浏览 器 通过 Geolocation 还 能 获取 到 海拔 海拔 精准 度 、 行 驶 方向 和 速度 等 ， 
开发 者 可 以 通过 该 接口 获取 到 与 原生 应 用 同样 丰富 的 数据 形式 ， 开 发 出 更 多 酷 炫 的 功能 ， 而 这 一 
切 都 可 以 在 浏览 器 里 实现 。 


4.2.3 ”检测 浏览 器 是 否 支持 地 理 定位 
目前 并 不 是 所 有 浏览 器 都 支持 地 理 定位 功能 ， 所 以 先 通过 一 段 js 代码 来 测试 一 下 : 
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第 5 行 判断 浏览 器 是 否 支 持 Geolocation， 如 果 不 支 持 ， 则 给 出 提示 ， 如 果 支 持 ， 调 用 
getCurrentPosition 方法 获取 地 址 位 置 ， 然 后 通过 第 13~14 行 显示 地 理 信 息 。 


4.3 使 用 Geolocation API 


前 面 了 解 了 Geolocation API 的 语法 ， 以 及 它 到 底 能 获取 什么 样 的 地 理 数据 ， 本 节 开 始 通过 例 
子 演 示 如 何 调用 Geolocation API。 


4.3.1 获取 用 户 当前 的 地 理 位 置 
下 面 结合 地 图 应 用 ， 在 地 图 上 显示 用 户 当前 的 地 理 位 置 并 进行 标注 ， 代 码 如 下 : 
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示例 效果 如 图 4.2 所 示 。 


DD) loculhost/Geolocation } x 
€ 3 © |D localhost/Geolocation. htm 


we 民主 人 


图 42 ”通过 Geolocation 接口 获取 经 纬度 


如 果 浏览 器 显示 “系统 已 阻止 此 网 页 跟踪 您 的 地 址 ”， 则 需要 看 看 下 一 小 节 ， 设 置 管理 位 置 ， 


不 同 的 浏览 器 设置 方式 不 同 。 


4.3.2 ”访问 地 理 位置 的 安全 问题 
Geolocation API 用 于 将 用 户 当前 地 理 位 置信 息 共享 给 信任 的 站 点 ， 这 涉及 用 户 的 隐私 安全 问 
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题 ， 所 以 当 一 个 站 点 需要 获取 用 户 的 当前 地 理 位 置 ， 浏 览 器 会 提示 用 户 是 “允许 ”or “拒绝 ”。 
当 用 户 访问 一 张 使 用 HTML 5 Geolocation 功能 开发 的 页 面 时 , 浏览 器 会 出 现 用 户 授权 提示 条 ， 
图 4.3 显示 了 在 Chrome 浏览 器 下 用 户 授权 条 的 样式 〈 不 同 的 Chrome 版 本 提示 可 能 略 有 不 同 )。 


Ei 


癌 localhost/Geolocation } x 全 
€ 2 © |D localhost/Geolocation. htm 守信 © 
他 localhost 想 要 使 用 您 的 计算 机 的 所 在 位 置信 息 。 | 允许 | | 拒绝 | 了 解 详情 


经 度 : 
纬度 ， 


图 43 Chrome 浏览 器 下 Geolocation 功能 授权 提示 


不 同 的 浏览 器 , Geolocation 用 户 授权 提示 信息 形式 也 不 同 , Firefox 的 授权 提示 如 图 4.4 所 示 。 


ely 
文件 中 编辑 到) 查看 WD 历史 G) 书签 刀 工具 中 帮助 0 
| DMttp://1ocdhost/Geolocation htm 


9 个 locuhos O Cj 图 - 百 Pj 电 合 天 


如 您 想 要 与 localhost 共享 您 的 位 置信 息 由 ? 
线 了 前 多 … 
部 内 吕 回国 古 


图 44 Firefox 浏览 器 下 Geolocation 功能 授权 提示 


HTML 5 Geolocation 方法 在 使 用 时 除了 会 进行 用 户 授权 ， 浏 览 器 还 允许 对 过 往 进行 授权 的 网 
站 进行 再 修改 ， 用 户 可 以 通过 修改 网 站 授权 达到 保护 自己 的 隐私 ， 比 如 在 咖啡 厅 使 用 带 有 
Geolocation 的 应 用 查找 周边 的 商户 信息 ， 这 时 候 应 用 通过 经 纬度 信息 定位 周边 商户 ， 可 以 方便 自 
己 寻 找 信息 ， 但 当 环 境 发 生变 化 时 ， 如 回 到 自己 的 家 中 ， 此 时 可 以 重新 将 授权 私有 以 起 到 保护 作 
用 。 下 面 将 通过 图 示 来 学 习 如 何 将 授权 的 网 站 再 次 隐私 。 

以 Chrome 浏览 器 为 例 ， 首 先 ， 单 击 浏览 器 导航 栏 右 侧 圆 形 类 似 定 位 的 按钮 ， 如 图 4.5 所 示 。 


DD) localhost/Geolocation } x Wl 
€ DC Dlocalhost/t tionhm 
出 网页 包含 来 自 以 下 网 站 的 元 素 ， 这 些 网 站 正在 跟踪 您 的 位 置 : 


经 度 ，121. 3387548 。 lecalhest 
纬度 ，31. 1608576 者 I@ 这 此 设 因 以 全 日 后 访问 


管理 位 轩 设 署 


45 单 击 Chrome 浏览 器 导航 栏 右 侧 定位 按钮 


然后 ， 单 击 弹出 提示 框 的 “管理 位 置 设置 ”链接 ， 此 时 会 重新 打开 一 个 窗口 ， 链 接地 址 为 
“chrome://settings/contentExceptions##ocation”， 新 开 的 页 面 显示 当前 浏览 器 的 地 理 位 置信 息 情况 
列表 ， 用 户 可 以 通过 编辑 列表 选择 是 否 再 次 对 网 站 进行 授权 ， 如 图 4.6 所 示 。 
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~ + _ ns 


地 理 位 置信 息 例 乡情 况 


主机 名 { 可 包 合 调配 符 ) 
http://localhost:80 


图 4.6 ”Chrome 浏览 器 Geolocation 授权 编辑 列表 
修改 完成 后 ， 单 击 “ 完 成 ”按钮 即 可 。 


外. 处 实例 1 : 手机 地 理 定位 


在 一 个 以 地 点 为 核心 的 项 目 中 ， 需 要 获取 用 户 地 理 位 置 的 坐标 。 本 例 演示 通过 WI-FI 获取 当 
前 地 理 位 置 的 坐标 。 当 用 户 打开 浏览 器 ， 页 面 上 显示 通过 手机 3G 网 络 信号 地 理 定位 的 当前 坐标 ， 
同时 用 Google Maps 显示 标记 当前 的 地 理 位 置 。 

在 iPhone 4S 上 使 用 Safari 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 4.7 所 示 。 


必 元 本 示例 需要 通过 架设 Web 服务 器 来 访问 文件 。 | 


4.7 询问 是 否 允 许 使 用 当前 的 位 置 。 
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单 击 “ 好 ”按钮 ， 运 行 效果 如 图 4.8 所 示 。 


通常 手机 信号 获取 经 纬度 ， 显 示 当前 位 置 


手机 定位 


，。 经 度 : 121.41631423959416 
， 纬度 : 31.218327489716945 


图 48 了 P 使 用 联通 3G 网 络 定位 


盖 世代 可 在 iPhone 4S 的 Safari 浏览 器 下 测试 通过 ， 建 议 使 用 Safari 浏览 器 打开 ;确保 手机 关 问 
”WIFI; 确保 手机 已 通过 手机 信号 连接 上 网 络 ; 出 于 隐私 考虑 ， 在 第 一 次 运行 该 页 面 时 ， 会 弹 
出 提示 是 否 授权 使 用 您 的 地 理 位 置信 息 ， 该 程序 需要 授权 才 可 正常 使 用 定位 功能 。 


通过 手机 地 理 定位 的 关键 函数 是 via3G， 代 码 如 下 : 


68 
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第 4 行 调用 navigator.geolocation.getCurrentPosition 方法 通过 手机 信号 获取 定位 信息 。 


通过 GPS 获取 定位 信息 的 函数 与 通过 WI-FI 获取 定位 信息 的 方法 一 样 ， 不 清楚 的 读者 ， 可 参 


见 “ 通 过 WIFI 获取 地 理 定位 信息 ”的 示例 。 


如 图 4.9 所 示 ， 卫 地 址 地 理 定 位 最 不 精确 ， 其 他 3 种 方式 定位 误差 非常 小 ，GPS 和 手机 定位 
方式 最 为 精确 。 


四 种 定位 方式 
IP 地 址 定位 精度 WI-FI 地 址 定位 精度 
当前 IP : 180.169.28.74 ， 经 度 : 121.41575300000001 
。 经 度 : 1213997 ， 纯度 : 312174201 
。 纬度: 31.0456 
网 网 地 图 | 了 | 
和 
日 
再 Dd 种 必 公 
二 和 1 
| 
ET 小 同 南 一 
a TE 
北 下 家 于 2 Ce 
区 oD 一 好久 小 区 。” 综 几 大厦 旭 于 项 
人 oo a F2013 cspo11E020 Aviiav Go5g -EE Sorgen MM 2013 3020} 1 E070 AuoNaE EESyh -En 
GPS 手机 
经 度 经度 
12141634470635219 [112141631423959416 
纬度 结 度 
31218313779065294 EF 有 于 218327489716945 FE 
> ED 
aw | rui 
KX 
小 河南 
ES “美人 大 下 美 他 大林 店 人 和 
人 we 有 je jmsa e2013 cspo115BREAGtanaw cooge -全 jm e2013 GsPo11P626Aitauaw Googb -人 用 


图 49 全、WI-FI[、GPS、 手 机 网 络 定位 比 对 
手机 地 理 定位 可 在 室内 使 用 ， 精 确 度 相当 高 ， 但 手机 需要 能 通过 运营 商 上 网 。 从 目前 智能 机 
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的 普及 来 着 ， 手 机 这 个 缺点 已 经 可 以 忽略 不 计 了 。 


4. “实例 2 : 使 用 谷歌 地 图 查找 路 线 


本 例 演示 一 个 生活 中 经 常用 到 的 场景 , 根据 Google 地 图 查找 出 行路 线 。 路 线 查找 需要 提供 起 
始 位 置 和 目的 地 位 置 。 利 用 HTML 5 提供 的 获取 地 理 位 置信 息 ， 可 以 非常 方便 地 定位 到 当前 地 理 
位 置 ， 然 后 提供 的 目的 地 ， 就 可 以 根据 Google 地 图 API 查找 出 行路 线 。 本 示例 演示 的 路 线 查找 
功能 也 可 以 选择 出 行 方式 ， 包 括 自驾 车 、 公 交 、 步 行 、 自 行车 这 4 种 方式 。 

使 用 Chrome 浏览 器 打开 “使 用 Google 地 图 查找 路 线 ” 网 页 文件 ， 运 行 效果 如 图 4.10 所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ， 经度 : 120.155069 ) } 
起 始 位 置 使 用 当前 位 置 作为 起 始 位 置 
结束 位 置 使 用 当前 位 置 作为 结束 位 轩 
出 行 方案 『& 交 |‖ 查找 
和 天 让 和 
dni NY 二 | 
抽 四 公国 
各 一 文 = 路 \ 一 一 [ 
xe N\ Co Er 
机 州 亿 医 和 m 晤 从 有 
人 
华 浙 公园 
杭州 市 mt 
BB ZE 四 rm TD 二 
tl 
站 区 本 得 社区 二 -1 
EF hn 放量 证 浙江 饭店 | 
类 过 大 酒店 
保全 增 " | 1 
“ual 3 


图 4.10 ”查找 路 线 页 面 
在 起 始 位 置 一 栏 单 击 “使 用 当前 位 置 作为 起 始 位 置 ”文字 按钮 ， 运 行 效果 如 图 4.11 所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ， 经度 : 120.155069 


起 始 位 置 2 位 使 用 当前 位 置 作为 起 始 位 置 


结束 位 置 使 用 当前 位 置 作为 结束 位 轩 
图 4.11 单 击 使 用 当前 位 置 作为 起 始 位 置 
在 结束 位 置 一 栏 ， 填 写 “ 西 溪 国 家 湿地 公园 ” 出 行 方 案 选 择 “ 公 交 ”， 然 后 单 击 查找 按钮， 
运行 效果 如 图 4.12 所 示 。 图 中 左 侧 以 地 图 形式 显示 查找 结果 ， 标 签 A 代表 起 始 位 置 ， 标签 B 代 
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表 结 束 位 置 ， 图 中 右 侧 以 文字 的 形式 显示 具体 的 路 线 信息 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ,经度 : 120.155069 ) } 


Het nnn aso 
a | onononrerer 
A 案 [BR 上 可 
步行 路线 正在 测试 中 。 注意 一 此 路 线 可 能 所 和 部 分 人 行道 
信息 . 
中 国 浙 工 省 杭州 市 拱 坚 区 莫 干 山路 10 号 邮政 编码 : 
三 由 镇 2 00 
go ”104 公 里 一 大 的 1 小 时 23 分 名 
? 前 占 步行 前往 或 林 门 马 用 路 口 
¥ 再 所 大 约 4 分钟 


# 
7 武林 门 马 腾 路 口 
日 K213 路 夜间 车 区 间 空 调 公交 开 往 : 留 下 
可 下 午 11:56- 上 午 12:52 (56 分 钟 , 13 站 ) 
| 服务 运营 方 : Mapabc 

2 
hm 


金鱼 井 
| 司 昌 人 


公交 数据 信息 源 自 : 
， 包含 有 关 旨 用、 时 刘表 和 服务 咨询 的 更 余 信 息 
i ley > 
WN eof Et yon on ceo 地 图 数据 ©2013 GS(2011)6020 AutoNavi, Google 


图 4.12 查找 去 西溪 国家 湿地 公园 的 路 线 
在 出 行 方案 选项 卡 中 ， 单 击 下 拉 框 选择 驾车 ， 然 后 单 击 “查找 ”按钮 ， 运 行 效果 如 图 4.13 所 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ,经 度 : 120.155069 ) } 


起 始 位 置 39 位 | Smsmomr et 
结束 位 置 [eg 全 | Rm 
引 查找 
Ne Y ET 中 国 浙江 省 杭州 市 拱 坚 区 莫 干 山路 10 号 邮政 编码 : 
HA | ,i 


be f I 
PA i F Ei 让 让 99 公里 -大 的 22 分 钟 


“着 。 一 帮 雷 1 从 莫 干 山路 向 北 行驶 ， 到 密 渡 桥 路 。 57 米 

了 2 在 第 一 个 路 中 转 , 昌 检 渡 析 路 行进 02 公里 
3. 在 第 一 个 路 口 向 左 转 ， 棚 湖 茎 南路 行进 0 4 公里 
4. 向 左 转 ,进入 文 晖 路 04 公 里 
| 5. 继续 前 行 ， 上 文 三 路 3.0 公 里 
“6. 向 左 转 ， 进入 十 于 路 05 公 里 
,ji 7 在 第 一 个 路 口 向 右 转 ， 朝 天 目 山路 行进 44 公里 
8. 向 右 转 ,进入 花 坞 路 10 公 里 


9 ey 


4.13 ”驾车 路 线 


| 
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在 出 行 方案 选项 卡 中 ， 单 击 下 拉 框 选择 自行 车 ， 然 后 单 击 “查找 ”按钮 ， 运 行 效果 如 图 4.14 
所 示 。 


查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经度 : 120.155069 ) } 


起 始 位 置 xn 全 用 当 肌 7 人 (Fi 人生 


结束 位 置 本 有 家 浊 地 公 同 全 且 当 前 这 村 作 类 导 吉 位 置 


本 ed 
2 设 有 近 到 路 线 , 可 能 是 不 支持 当前 国家 


图 4.14 自行 车 路 线 


性 却 | 没有 找到 自行 车 路 线 ， 因 为 Google 地 图 目前 只 有 美国 地 区 支持 自行 车 路 线 。 | 


在 出 行 方案 选项 卡 中 ， 单 击 下 拉 框 选择 步行 ， 然 后 单 击 “ 查 找 ” 按 钮 ， 运 行 效果 如 图 4.15 所 
示 。 


查找 路 线 { 当前 位 置 ( 绪 度 : 30.274088999999996 , 经度 : 120.155069 ) } 


起 始 位 置 &oen | wast i 
结束 位 置 3A | Rms 
出 行 方案 5E ” ”本 查找 


ae S = hs 注意 - 此 路 线 可 能 缺乏 部 分 人 行道 
RR SEE 


py Tt 下 编码 


ecam- 大 的 1 小 时 46 分 名 
1 向 北 前 行 ,从 黄 干 山路 直到 密 渡 桥 路 05 公里 
学 二 > 大 2. 向 左 转 ,进入 文 三 路 30 公 里 
3. 稍 册 向 转 ， 进 和 广 三 西 路 30 公 里 
a 4 向 右 转 , 进入 租金 洪 路 久米 
”5 向 左 转 16 公 里 
轩 6 向 左 转 04 公 里 


4 中 国 沂 工 省 杭州 市 西湖 区 西 爱 区 家 湿 二 公园 


4.15 ”步行 路 线 


ET 


创建 “使 用 Google 地 图 查找 路 线 .html” 页 面 ， 样 式 部 分 代码 如 下 : 


HTML 部 分 代码 如 下 : 
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第 3 行 和 第 7 行 ， 输 入 框 可 以 让 用 户 自己 输入 路 线 查找 的 起 始 位 置 或 者 结束 位 置 。 
第 4 行 和 第 8 行 ， 定 义 用 户 可 以 选择 以 当前 位 置 作为 起 始 或 者 结束 位 置 。 

第 12~17 行 ， 定 义 了 4 种 出 行 方式 ， 分 别 为 : 

TRANSIT: 公交 

DRIVING: 驾车 

BICYCLING: 自行 车 

WALKING: 步行 


第 21 行 ， 元 素 <div id="directionsPannel"> 作 用 是 把 路 线 查 找 的 文字 结果 显示 在 这 里 。 
JavaScript 逻辑 代码 部 分 如 下 : 


第 4 章 HTML 5 的 地 理 位 置 定位 


构建 跨 平台 APP: HTML 5 + PhoneGap 移动 应 用 实战 了 


【第 4 章 ，”HTML 5 的 地 理 位 置 定位 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


第 17 行 ， 在 navigator.geolocation.getCurrentPosition 函数 的 回调 结果 中 ， 用 currentPosition 记 
录 定 位 的 结果 。 如 果 是 使 用 当前 位 置 进行 查找 路 线 ， 这 个 结果 在 执行 路 线 查找 时 会 用 到 。 

第 28~33 行 ， 定义“ 使 用 当前 位 置 作为 起 始 位 置 ” 和 “使 用 当前 位 置 作为 结束 位 置 ”的 事件 
处 理 函数 ， 当 用 户 单 击 其 按钮 时 ， 设 置 其 对 应 的 文本 输入 框 的 值 为 “我 的 位 置 ” 并 把 字体 颜色 改 
为 蓝 色 。 然 后 设置 变量 isCurent 的 值 为 tue， 用 来 标记 要 使 用 当前 位 置 作为 起 始 或 者 结束 位 置 。 

第 34~37 行 ， 取 消 使 用 当前 位 置 为 作为 查找 条 件 。 


本 局 当 用 户 在 输入 框 中 敲 入 文字 时 ， 表 示 用 户 不 想 使 用 当前 位 置 来 查找 。 


第 38~45 行 ， 定 义 了 “使 用 当前 位 置 作为 起 始 位 置 ^“ 使 用 当前 位 置 作为 结束 位 置 ” 2 个 文 
本 输入 框 和 “查找 ”按钮 的 事件 代理 。 

第 46~83 行 ， 是 查找 路 线 的 处 理 函 数 。 

第 48~49 行 ， 获 取 路 线 查找 的 起 始 和 结束 位 置 ， 如 果 使 用 当前 位 置 ， 则 其 值 为 第 17 行 代码 
赋予 变量 currentPostion 的 值 ， 如 果 不 使 用 当前 位 置 作为 查找 条 件 ， 则 对 应 获取 用 户 输入 的 文字 。 

第 50 行 ， 获 取 用 户 选择 的 出 行 方式 。 

第 57 行 ， 调 用 directionsService 的 route 方法 ， 该 方法 提供 两 个 参数 。 第 1 个 参数 为 查找 条 件 

(包括 路 线 的 起 始 、 结 束 位 置 和 出 行 方式 等 ), 第 2 个 参数 为 查找 结果 的 回调 函数 。 回 调 函数 中 第 

一 个 参数 是 具体 的 路 线 结果 ， 第 2 个 参数 代表 查找 结果 的 状态 。 


了 解 更 多 谷歌 地 图 相关 的 查找 路 线 的 信息 接口 ， 读 者 可 以 请 参考 


https://developers.google.com/maps/documentation/javascript/reference#DirectionsService。 


第 58 行 ， 表示 已 经 查找 到 了 结果 。 

第 61 行 ， 如 果 查 找到 路 线 ， 在 地 图 上 显示 出 路 线 。 

第 62 行 ， 在 <div id="directionsPanel"> 上 显示 查找 结果 的 文字 方案 。 

第 65~78 行 ， 是 没有 正确 查找 到 路 线 的 错误 处 理 逻 辑 。 常 见 的 有 3 种 错误 : 
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第 4 章 HTML 5 的 地 理 位 置 定位 
@ OK: 表示 找到 路 线 
。 NOT_FOUND: 表示 起 点 和 终点 至 少 有 一 个 位 置 没 找到 
ee ZERO RESULT: 表示 起 点 和 终点 找到 了 ， 但 没有 找到 相关 路 线 


必 却 更 多 的 错误 信息 请 参考 https://developers.google.com/maps/documentation/directionsP?hl=zh-cn。 | 


第 114 行 ， 表示 Google 地 图 可 用 后 马上 调用 init 函数 进行 初始 化 。 


4.6 4 结 


在 没 学 习 本 章 之 前 ， 很 多 人 可 能 不 了 解 ， 原 来 PC 上 的 浏览 器 也 可 以 获取 地 理 位 置 。 通 过 本 
章 的 学 习 ， 我 们 了 解 了 移动 网 页 也 可 以 定位 ， 也 可 以 通过 IP 或 WIFI 来 获取 地 理 位 置 。 鉴 于 谷歌 
地 图 在 很 多 时 候 可 能 调用 起 来 不 太 方 便 ， 读 者 可 以 尝试 修改 本 章 的 地 图 ， 改 成 用 百度 地 图 来 尝试 
一 下 。 
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第 5 章 
4HTNML 5 的 Web Workers 


浏览 器 中 的 JavaScript 一 直 运 行 在 单线 程 的 环境 中 ， 所 以 在 做 网 站 前 端 优化 时 ， 习 惯性 地 将 
JavaScript 放置 在 页 面 的 底部 ， 这 样 可 以 让 页 面 的 内 容 更 快 地 加 载 泻 染 。 有 的 时 候 ， 遇 到 前 端 处 理 
页 面包 括 大 量 数据 时 ， 会 使 用 setTimeout 方法 ， 错 开 任务 的 执行 时 间 ， 避 开 同 一 时 间 执 行 造成 的 
交互 停滞 。 这 些 做 法 虽然 在 一 定 程度 上 能 起 到 优化 效果 ， 但 显而易见 的 是 浏览 器 单线 程 执行 
JavaScript 的 制约 了 浏览 器 实现 富 应 用 的 脚步 。 

HTML 5 提出 了 Web Workers 新 功能 ， 使 得 JavaScript 可 以 类 似 于 线程 一 样 地 实现 并 行 ， 充 分 
利用 现在 计算 机 多 核 CPU 的 处 理 优势 。 开 发 者 可 将 一 些 脚本 处 理 的 计算 密集 型 任务 分 配给 Web 
Workers 处 理 ， 而 不 阻碍 页 面 UI 与 用 户 的 交互 。 


本 章 主要 内 容 包括 : 

@ 了 解 Web Workers 的 使 用 场合 

@ 学 习 如 何 使 用 Web Workers 进行 通信 

@ 通过 几 个 例子 掌握 Web Workers 在 现实 项 目 中 的 应 用 


认识 Web Workers 


Web Workers 是 运行 在 后 台 的 JavaScript， 独 立 于 其 他 脚本 ， 不 会 影响 页 面 的 性 能 ， 本 节 将 学 
习 如 何 使 用 Web Workers。 


5.1.1 Web Workers 的 应 用 场合 


Web Workers 虽然 强大 ， 但 也 需要 在 合适 的 场景 内 使 用 ， 对 于 有 些 情况 的 处 理会 受到 浏览 器 
的 限制 , 比如 在 Web Workers 中 执行 的 脚本 无 法 访问 页 面 的 Window 对 象 , 也 就 是 说 , Web Workers 
无 法 直接 访问 页 面 与 DOM 相关 的 程序 接口 。 同 时 ， 如 果 开 发 过 程 中 出 现 过 多 的 实例 化 Web 
Workers 对 象 处 理 数据 ， 会 对 计算 机 的 CPU 产生 消耗 ， 导 致 系统 响应 速度 降低 。 

所 以 ， 只 有 在 合适 的 场景 使 用 Web Workers 才能 使 浏览 器 应 用 变 得 更 加 流畅 ， 目 前 ， 市 面 上 
的 浏览 器 对 Web Workers 的 支持 情况 各 不 相同 ， 表 5.1 是 主流 浏览 器 对 Web Workers 的 支持 情况 。 
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表 5.1 主流 浏览 器 Web Workers 支持 情况 


在 创建 Web Workers 之 前 ， 可 以 通过 如 下 代码 来 测试 浏览 器 是 否 支 持 它 : 


5.1.2 与 HTML 5 Web Workers 通信 


作为 一 项 在 浏览 器 内 使 用 的 新 技术 ， 与 页 面 DOM 交互 是 必 不 可 少 的 ， 但 是 Web Workers 不 
能 直接 对 DOM 进行 处 理 ， 需 要 通过 事件 模型 和 postMessage 方法 实现 。postMessage 接受 字符 串 
或 JSON 对 象 作为 参数 ， 具 体 使 用 情况 取决 于 用 户 的 浏览 器 ， 在 新 型 的 浏览 器 中 可 以 支持 传递 
JSON 对 象 。 

下 面 通过 一 个 Hello World 示例 介绍 Web Workers 的 使 用 ， 浏 览 器 端 代码 如 下 : 


Web Workers 脚本 文件 web_workerjs 的 代码 如 下 : 
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5.1.3 多 个 JavaScript 文件 的 加 载 


对 于 一 些 较为 复杂 的 应 用 来 说 ，Web Workers 内 部 可 能 需要 加 载 外 部 脚本 ， 保 持 代码 功能 的 
唯一 性 。 在 网 页 上 加 载 多 个 脚本 ， 大 家 都 知道 可 以 通过 添加 多 个 script 标签 ， 当 页 面 加 载 时 同步 
加 载 JavaScript 文件 ， 对 于 Web Workers 来 说 ， 道 理 也 是 类 似 的 ， 不 过 需要 借助 于 importScripts 
方法 ， 语 法 如 下 : 


importScripts 方法 除了 支持 传递 单个 参数 外 ， 还 允许 接收 多 个 脚本 传递 ， 语 法 如 下 : 


5.1.4 终止 Web Workers 的 监听 操作 


前 面 提 到 ，Web Workers 通过 addEventListener 来 监听 message 事件 来 向 页 面 传递 信息 ， 所 以 
它 始 终 处 于 监听 状态 ， 如 果 我 们 要 终止 这 个 监听 操作 ， 则 需要 使 用 terminate0 方 法 ， 语 法 如 下 : 


这 个 方法 比较 简单 ， 没 有 任何 参数 ， 所 以 这 里 不 特别 举例 ， 读 者 可 通过 下 一 个 的 终止 计数 器 
来 了 解 它 的 具体 应 用 。 


5.1.5 利用 Web Workers 创建 一 个 简单 的 页 面 计数 器 


前 面 已 经 了 解 了 Web Workers 的 基本 使 用 方法 ， 本 节 通 过 一 个 常见 的 页 面 计数 器 来 学 习 它 的 
具体 应 用 。 
创建 页 面 count.htm，HTML 代码 如 下 : 
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workersjs 的 内 容 如 下 : 
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运行 本 例 的 效果 如 图 5.1 所 示 。 


计数 器 : 16 


| [合计 数 ] 


图 5.1 页 面 计数 器 


5 . 2 实战 Web Workers 


Web Workers 的 语法 特别 简单 ， 如 果 只 是 简单 的 几 段 js 代码 ， 当 然 也 没 法 发 挥 Web Workers 
的 作用 ， 本 节 通 过 几 个 完整 的 应 用 来 深入 学 习 Web Workers 的 开发 。 


5.2.1 实例 1: 大 数量 的 图 片 处 理 


在 现实 开发 中 Web Workers 常常 用 于 处 理 大 型 密集 型 数据 任务 ， 可 以 有 效 地 避免 阻塞 主 UI 
线程 泻 染 交互 。 本 例 将 演示 通过 Web Workers 在 后 台 处 理 图 片 数 据 ， 包 含 对 图 片 进行 逆 色 和 黑白 
处 理 功能 ， 并 将 处 理 结束 后 的 图 片 数 据 信息 发 送 至 前 台 页 面 进行 泻 染 。 

运行 本 例 之 前 ， 首 先 将 代码 部 署 在 Web 服务 器 上 ， 如 Apache、IIS 或 Nginx 等 ， 使 用 浏览 器 
打开 WebWorkerhtm， 效 果 如 图 5.2 所 示 。 


DD) localhost/WebWorker hts x 
€ D3 CD localhost/WebWorker. htm 


图 5.2 Web Workers 例子 效果 图 
单 击 “ 逆 色 ” 按 钮 ， 按 钮 下 方 的 黑色 方 框 区 域 出 现 上 方 图 片 的 逆 色 效果 ， 如 图 5.3 所 示 。 
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Dlocalhost/Weborker ht x 


图 5.3 单 击 “ 逆 色 ” 按 钮 
单 击 “ 黑 白 ” 按 钮 ， 按 钮 下 方 显示 出 现 图 片 的 黑白 色 效 果 ， 如 图 5.4 所 示 。 


D leeahost/Webyorker htr x 


所 3 CC Dlocalhost/WebNorker.htm 


(从 S02 ES 


仿 芝 


图 5.4 单 击 “ 黑 白 ” 按 钮 
HTML 页 面 代 码 如 下 : 
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主页 面 要 完成 的 功能 比较 简单 ， 首 先 ， 实 例 化 WebWorkers 对 象 并 传递 对 应 后 台 脚 本 地 址 ， 
监听 该 对 象 的 message 事件 ， 接 收 后 台 脚 本 返回 的 数据 信息 。 接 着 ， 监 听 页 面 逆 色 和 黑白 按钮 的 
单 击 事件 ， 当 触发 单 击 事件 时 ， 使 用 canvas 的 drawImage 方法 绘制 图 像 ， 并 通过 canvas 的 
getImageData 方法 获取 图 像 的 数据 信息 ， 然 后 调用 实例 化 后 的 Web Workers 对 象 的 postMessage， 
向 后 端 运 行 的 脚本 发 送 图 片 数据 信息 。 后 端 WebWorker 脚本 代码 如 下 : 
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后 端 WebWorker 脚本 要 做 的 是 ， 将 主页 面 返回 的 图 片 数据 信息 交 给 对 应 的 图 形 处 理 方法 ,在 
invert 或 grayscale 图 形 方法 处 理 完毕 后 ， 将 返回 处 理 后 的 数据 交 给 主页 面 ， 主 页 面 在 接收 到 返 
的 图 片 数 据 后 ， 通 过 canvas 进行 泻 染 呈 现 。 


加 


5.2.2 ”实例 2: 实现 微 博 消息 的 实时 推送 


HTML 5 提供 了 非常 方便 的 通信 机 制 ， 利 用 其 跨 文 档 间 的 通信 可 以 非常 容易 地 实现 一 些 业 务 
功能 。 本 例 演示 利用 HTML 5 的 跨 文档 通信 功能 ， 实 现 微 博 页 面 的 实时 刷新 功能 。 
使 用 浏览 器 打开 “ 微 博 消息 实时 推送 -index” 网 页 文件 ， 运 行 效果 如 图 5.5 所 示 。 


画 本 例 程序 需要 在 本 地 Web 服务 器 上 通过 http://localhost 地 址 运行 。 


图 5.5 页 面 初始 化 
过 几 秒 钟 后 ， 页 面 显示 效果 如 图 5.6 所 示 。 
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微 博 消息 实时 推送 

aaaaaaaaaaaaaaaaaaaaaaaa 
ffffffffffffffffffffffff 
bbbbbbbbbbbbbbbbbbbbbbbb 


图 5.6 微 博 实时 消息 


寿 寺 根据 运行 环境 不 同 ， 等 待 的 时 间 会 不 太一 样 ， 这 取决 于 程序 的 随机 计算 。 


创建 “ 微 博 消息 实时 推送 -index.html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 主 文件 ， 代 码 
如 下 : 
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画 这 是 本 例 代码 的 第 1 个 文件 ， 该 文件 作为 程序 的 主 文件 。 


第 21 行 ， 引 入 微 博 消息 实时 处 理 的 Server 处 理 文件 ， 即 第 2 个 文件 ， 如 无 特殊 说 明 ， 以 下 
称 此 文件 为 Server 辅助 文件 。 因 为 要 获取 数据 ， 需 要 经 常 和 Server 通信 ， 如 果 把 与 Server 进行 通 
信 的 工作 交 给 主 文件 处 理 ， 那 么 主 文件 的 性 能 会 损耗 较 大 。 通 过 HTML 5 的 通信 机 制 ， 可 以 通过 
引入 Server 辅助 文件 。 当 Server 辅助 文件 与 Server 通信 后 ， 获 得 了 新 的 微 博 数据 ， 则 主动 通知 主 


文件 有 新 的 微 博 消息 ， 需 要 主 文件 处 理 。 主 文件 、Server 辅助 文件 、Server 三 者 的 关系 如 图 5.7 
所 示 。 


图 5.7 主 文件 、Server 辅助 文件 、Server 三 者 关系 


89 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


代码 第 33 行 ， 监 听 Server 辅助 文件 是 否 发 来 通知 ， 如 果 Server 辅助 文件 发 出 通知 ， 则 触发 
主 文件 的 message 事件 ， 然 后 执行 事件 的 回调 函数 。 


window.addEventListener(“message”,callback) 是 HTML 5 中 新 增 的 事件 监听 方法 ， 可 以 接收 其 
他 文档 通过 postMessage 发 来 的 消息 。 有 关 详 细 的 信息 可 参考 http://dev.w3.org/HTML 
S/postmsg/。 


第 34 行 ， 判 断 消息 来 源 是 否 可 靠 ，message 事件 代理 中 的 参数 包含 2 个 重要 的 信息 ，origin 
和 data 。origin 保存 了 消息 的 来 源 ，data 保存 了 消息 的 消息 体 。 其 他 有 关 信 息 可 参考 
http://dev.w3.org/HT™ML S/postmsg/。 

第 35 行 ， 如 果 通 过 了 来 源 检测 ， 则 调用 处 理 函 数 处 理 消息 。 

第 27~31 行 ， 是 具体 的 处 理 罗 和 辑 ， 读 者 可 根据 业务 自行 扩展 。 

创建 “ 微 博 消 息 实时 推送 -server.html”Server 辅助 文件 ， 代 码 如 下 : 
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第 08 行 ， 为 了 模拟 Server 返回 数据 ， 此 数据 是 我 们 伪造 的 。 

第 24~25 行 ， 随 机 获取 1 个 0~9 的 整数 index， 并 判断 virtualData 是 否 存在 index 的 索引 。 如 
果 存 在 ， 返 回 其 值 ， 不 存在 返回 null。 

第 27 行 ,定义 了 1 个 轮 询 函数 ， 轮 询 间隔 从 1~10 秒 间 随机 。 

第 32 行 ， 如 果 有 微 博 更 新 ， 则 使 用 HTML 5 的 postMessage 向 windows.parent 〈 即 主 文件 ) 
发 消息 。postMessage 的 调用 对 象 为 window.parent， 即 主 文件 。 也 就 是 说 向 谁 发 消息 ， 需 要 获取 
对 方 的 引用 。 该 方法 包含 2 个 参数 ， 第 1 个 参数 为 需要 发 送 的 内 容 ， 一 般 为 文本 ， 有 些 浏览 器 也 
支持 对 象 、 数 组 等 。 第 2 个 参数 为 允许 的 发 送 源 。 


匡 志 postMessage 有 关 详细 信息 请 参考 http://dev.w3.org/HTML 5/postmsg/。 


5.2.3 ”实例 3: 预览 网 页 的 内 容 


在 新 闻 阅 读 类 网 站 中 , 经 常 需要 处 理 的 一 个 场景 是 , 把 新 闻 信息 嵌入 到 一 个 iFrame 中 供用 户 
阅读 详细 的 新 闻 。 而 这 种 情况 一 般 的 处 理 流程 是 跳 到 一 个 新 的 页 面 ， 本 例 通过 HTML 5 的 
postMessage 通信 ， 可 以 不 用 跳 转 ， 而 是 直接 在 当前 页 面 新 开 一 个 页 面 ， 供 用 户 阅读 。 

使 用 浏览 器 打开 “预览 网 站 内 容 .html” 网 页 文件 ， 运 行 效果 如 图 5.8 所 示 。 
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| 一 周文 章 精 选 +《 握 周刊 : 互联 网 创业 必 读 》#126 | 36 握 


| 谁 在 追随 安 - 兰 德 ? 


图 5.8 新 闻 列 表 
单 击 淘宝 网 标题 链接 ， 运 行 效果 如 图 5.9 所 示 。 


条 ， 欢迎 来 淘宝 ! 请 


淘宝 网 


Taobao.com 


天 竹 聚 划算 电器 城 超市 淘 网 Hitao 妆 扮 


大 导 注 迈 克 尔 由 殉 待 你 的 加 入 ! 
一 


天 汝 TnatLcon 精 选 品牌 特卖 -都 市 人 


端午 特惠 99 元 抒 购 没有 品味 
图 5.9 预览 网 站 具体 内 容 


单 击 左 侧 “关闭 ”按钮 ， 如 图 5.10， 页 面 回 到 图 5.8 所 示 状 态 。 


亲 ， 欢迎 未 淘宝 ! 


淘宝 网 


Taobao.com 


图 5.10 单 击 “ 关 闭 ” 按 钮 


创建 “预览 网 站 内 容 .html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 主页 面 ， 代 码 如 下 : 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="utf-8"> 

05 <title> 预 览 网 站 内 容 </title> 

06 <script type="text/javascript" src="jquery-1.8.3.js"></script> 
07 <style type="text/css"> 
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第 14~22 行 ， 定 义 一 则 新 闻 的 HTML 模板 。 由 于 篇 幅 限 制 ， 更 多 的 新 闻 列 表 请 参见 下 载 源 代 
码 。 第 33 行 ， 获 取 DOM 元 素 class 类 名 为 item 的 链接 元 素 ， 监 听 新 闻 标 题 单 击 事件 ， 当 用 户 单 
击 新 闻 标 题 时 ， 弹 出 新 闻 预 览 页 面 。 第 34~35 行 ， 分 别 是 阻止 a 链接 的 冒 泡 事件 和 默认 打开 新 页 
面 的 行为 。 

第 38 行 ， 设 置 当 前 body 的 高 度 为 窗口 可 视 区 域 的 高 度 ， 可 以 保证 iFrame 样式 不 出 错 。 第 
39 行 ， 设 置 Frame 的 高 度 为 窗口 可 视 区 域 高 度 减 去 15 像素 ， 其 中 15 像素 是 滚动 条 的 偏 移 量 。 
第 40 行 ， 获 取 当 前 窗口 可 视 区 域 的 宽度 减 去 50 像素 ， 其 中 50 像素 正 是 详情 页 动作 面板 的 宽度 。 

第 42~46 行 , 把 当前 用 户 单 击 的 标题 对 应 的 链接 及 宽 与 高 度 通 过 postMessage 传 给 详情 页 面 。 
第 48~52 行 ， 监 听从 详情 页 面 发 送 来 的 动作 ， 并 做 相应 的 处 理 ， 该 例 只 模拟 了 关闭 预览 页 面 的 行 
为 。 

创建 “preview.html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 详情 页 面 ， 代 码 如 下 : 
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第 13~15 行 ， 详 情 页 面 的 动作 控件 页 面 ， 本 例 模拟 了 关闭 动作 。 
第 24~29 行 ,监听 从 主页 面 发 来 的 信息 。 一 旦 收 到 主页 面 发 来 的 信息 ,立即 执行 ,并 设置 iFrame 
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的 sre 属性、 宽度 和 高 度 。 第 30 行 ， 监 听 动 作 面板 的 关闭 事件 ， 并 通知 主页 面 做 关闭 操作 。 


5.2.4 实例 4: 定时 给 网 站 用 户 发 消息 


本 例 模 拟 微 博 系 统 中 ， 不 刷新 页 面 的 新 消息 提醒 。 一 般 微 博 采 用 AJAX 技术 进行 HTTP 轮 询 
判断 是 否 有 新 的 微 博 消息 。 本 例 采用 EventSource 技术 ， 建 立 1 个 长 连接 ， 如 果 有 新 消息 来 ， 则 
对 用 户 进行 提醒 。 


Be 


运行 本 例 必须 在 客户 端 安装 Nodejs，Nodejs 是 一 个 跨 平 台 的 、 基 于 V8 引擎 的 JavaScript 编 
译 器 ， 具 体 可 参考 httpy/nodejs.org。 


在 本 地 创建 数据 库 “HTML 5”， 创 建 表 名 为 “demo_12 5”， 数 据 库 脚本 如 下 : 


在 命令 行 模式 下 ， 使 用 Node 命令 运行 “serverjs” 文 件 ， 命 令 行 如 下 : 


运行 效果 如 图 5.11 所 示 。 


5.11 启动 Nodejs 服务 


本 局 如 果 运 行 失败 ， 有 可 能 是 机 器 的 端口 被 占用 ， 请 在 源码 中 更 改 端 口号 。 


使 用 Chrome 浏览 器 打开 http://localhost:8000 地 址 ， 运 行 效果 如 图 5.12 所 示 。 
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这 里 是 微薄 内 容 ， 此 处 内 容 仅 做 演示 使 用 


图 5.12 无 未 读 消息 时 的 状态 
单 击 “ 进 入 后 台 添 加 消息 ”按钮 ，Chrome 浏览 器 新 开 1 个 标签 页 ， 运行 效果 如 图 5.13 所 示 。 


图 5.13 ”模拟 添加 微 博 消息 界面 
在 文本 框 中 输入 一 则 消息 “测试 消息 ”， 单 击 “ 提 交 ” 按 钮 。 运 行 效果 如 图 5.14 所 示 。 


添加 成 功 ， 返 回首 页 或 者 继续 添加 


图 5.14 模拟 微 博 消息 成 功 
在 Chrome 浏览 器 返回 “定时 给 客户 发 消息 ”标签 页 面 ， 可 以 看 到 页 面 项 部 出 现 了 “有 1 条 
新 消息 ”的 提示 。 如 图 5.15 所 示 。 


这 里 是 拆 落 内 容 ， 此 处 内 容 仅 做 演示 使 用 


进入 后 台 添加 消息 


图 5.15 ”后台 检测 到 有 新 消息 ， 推 送 到 前 台 提醒 
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打开 “serverjs” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 Server 文件 ， 代 码 如 下 : 


三 第 5 章 HTML 5 的 Web Workers 
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代码 第 01~09 行 ， 为 服务 器 的 配置 文件 ， 配 置 数据 库 的 信息 和 服务 启动 的 端口 号 ， 第 03~06 
行 分 别 是 数据 库 连 接地 址 、 数据库 用 户 名 、 数 据 库 密码 、 数据库 名 。 第 08 行为 服务 启动 的 端口 号 。 


莫 直 如 果 服 务 启动 时 ， 提 示 端 口号 被 占用 ， 需 要 在 第 08 行 修改 成 一 个 未 被 使 用 的 端口 号 。 


第 10~14 行 ， 包 含 本 例 需要 用 到 的 Nodejs 模块 。 第 15~16 行 ， 创 建 一 个 数据 库 连 接 实例 ， 
数据 库 连接 类 库 采 用 的 是 node-mysql。 


更 多 关于 node-mysql 的 信息 请 参考 GitHub 开源 项 目 https://github.com/felixge/node-mysql。 


第 17 行 , 创建 1 个 httpServer 实例 ，createServer 方法 接收 1 个 匿名 函数 。 该 匿名 函数 包括 两 
个 参数 ， 分 别 是 request 和 response，request 包含 了 请 求 的 信息 ，response 包含 了 响应 的 信息 。 


茵 更 多 关于 httpServer 信息 请 参考 网 址 http://nodejs.org/api/http.html。 


第 18~30 行 ， 判 断 请 求 是 否 为 EventSource， 并 进一步 验证 URL 路 径 是 否 与 “/notice ”相等 。 
如 果 相 等 ， 发 送 Content-Type 为 text/event-stream， 并 调用 loop 函数 ，loop 函数 是 每 间隔 10 秒 查 
询 一 次 数据 库 ， 并 向 客户 端 发 送 事 件 。 第 31~34 行 ， 判 断 请 求 路 径 是 否 为 “/admin”， 如 果 是 ， 则 
加 载 “ 后 台 模 拟 消息 ”文件 。 


后 台 模 拟 消息 文件 即 对 应 源 代码 中 的 “admin.html” 文 件 。 
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第 35~50 行 , 判断 请 求 是 否 为 后 台 添 加 消息 操作 ,如 果 是 ， 则 在 数据 库 中 增加 1 条 模拟 消息 。 
第 36~37 行 ， 从 URL 的 QueryString 中 取得 消息 内 容 ， 它 用 到 了 url.parse 模块 。 

第 和 行 , 操作 数据 库 , 把 消息 内 容 添加 到 数据 库 中 。 如 果 添 加 成 功 , 数据 库 新 增 1 条 未 读 消 
息 。 

第 51~53 行 , 如 果 所 有 的 请 求 路 径 都 不 满足 “/notice”、“/admin”、“/addmsg”， 则 执行 加 载 “ 主 
页 ”文件 ， 即 默认 载 入 主页 “定时 给 客户 发 消息 .html” 文 件 。 

创建 “定时 给 客户 发 消息 .html” 文 件 如 无 特殊 说 明 , 以 下 称 此 文件 为 主页 文件 代码 如 下 : 
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代码 第 08 行为 新 消息 提醒 区 域 ， 如 果 消 息 数 小 于 0， 默认 不 显示 ， 当 未 读 消息 数 大 于 0 时 ， 
显示 未 读 消息 数 。 

第 10 行 ， 微 博信 息 列 表 区 域 。 该 例 中 ， 微 博 消息 列表 不 是 本 例 的 核心 ， 所 以 采用 区 域 代替 ， 
读者 可 根据 实际 情况 填充 。 第 11 行 ， 后 台 添加 模拟 消息 的 入 口 ， 因 为 是 模拟 消息 列表 ， 所 以 该 入 
口 在 实际 环境 中 并 不 存在 。 

第 14 行 ， 判 断 浏览 器 是 否 支持 EventSource 技术 。 第 15 行 ， 实 例 化 EventSource， 参 数 设置 
为 “/notice”， 是 告诉 服务 器 的 请 求 地址 为 “/notice”， 对 应 “server 文件 ”的 第 19 行程 序 逻辑 。 

第 17~19 行 ， 监 听 用 户 单 击 未 读 消息 数 的 按钮 ， 该 例 没 有 给 出 清除 未 读 消 息 的 方法 ， 请 读者 
结合 实际 环境 进行 清除 。 

第 20~25 行 ， 监 听 服 务 器 端 发 来 的 消息 ， 如 果 服 务 器 端 发 来 新 消息 ， 表 明 有 新 的 未 读 消息 ， 
程序 重新 统计 未 读 消息 数 。 第 24 行 ， 把 新 的 消息 数 显示 在 新 消息 提醒 区 域 上 。 第 26 行 ， 监 听 事 
件 打开 状态 。 当 服务 端 与 客户 端 建立 起 连接 时 ， 可 以 通过 open 事件 做 一 些 逻 辑 处 理 。 

第 29 行 ， 监 听 事 件 的 错误 状态 。 当 服务 端 与 客户 端 建立 连接 发 生 错误 时 ， 该 事件 被 调用 。 

创建 “admin.html” 文 件 ， 如 无 特殊 说 明 ， 以 下 称 此 文件 为 后 台 模 拟 消息 文件 ， 代 码 如 下 : 
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第 11~15 行 ， 定 义 了 添加 模拟 消息 的 表单 ， 该 表单 提交 到 “/addmsg ”请求 上 ， 对 应 “server 
文件 ”的 第 35 行 执行 程序 。 


5.3 4 结 


本 章 介绍 了 如 何在 页 面 中 使 用 Web Workers， 并 通过 几 个 实例 演示 了 与 Web Workers 通信 的 
一 些 方法 和 技巧 。Web Workers 是 运行 在 后 台 的 JavaScript， 独 立 于 其 他 脚本 ， 在 它 运行 的 时 候 ， 
我 们 可 以 继续 做 任何 愿意 做 的 事情 ， 比 如 点 击 、 选 取 内 容 等 等 ， 这 样 就 提高 了 页 面 的 交互 性 及 性 
能 。 
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第 4 章 
<HTML 5 的 Web 存 储 > 


HTML 5 之 前 ， 我 们 通过 Cookies 来 保存 网 页 数据 ， 基 本 上 保存 的 内 容 很 少 ， 仅 限于 一 些 常用 
的 用 户 名 和 密码 等 信息 。 现 在 HIML 5 提供 了 新 的 Web 存储 方案 ， 并 且 已 经 获得 了 广泛 的 支持 ， 
如 Internet Explorer 8+、Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10.5+， 手 机 平台 包括 iPhone 2+ 
和 Android 2+， 都 已 经 实现 并 且 支 持 HTML 5 的 Web 存储 。 


本 章 主要 内 容 : 

e 了 解 HTML 5 的 存储 模式 

@ 学 习 使 用 LocalStorage 来 存储 数据 
e 熟 赤 HTML 5 下 数据 的 读 取 与 存储 


认识 HTML 5 的 Web Storage 


Cookies 不 能 存放 大 量 数 据 ， 而 在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传 递 的 ， 而 是 只 
有 在 请 求 时 才 使 用 数据 ， 这 就 使 得 我 们 可 以 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数 据 成 为 可 能 。 


6.1.1 为 什么 使 用 Web Storage 


传统 的 客户 端 存储 一 直 都 是 使 用 Cookies 实现 的 ， 但 由 于 Cookies 自身 的 局 限 ， 它 并 不 适合 
存储 大 量 数据 。 因 为 浏览 器 每 次 发 送 请 求 都 会 将 Cookies 信息 发 送 至 服务 器 端 ， 这 使 得 网 页 访问 
速度 下 降 且 不 够 高 效 ， 同 时 不 同 的 浏览 器 对 Cookie 有 不 同 的 限制 ， 如 早期 的 mternet Explorer 6 
浏览 器 对 Cookies 限制 大 小 为 SKB， 同 一 域名 下 只 允许 存在 20 个 Cookies， 后 续 新 增 的 Cookies 
数据 会 将 先前 的 踢 出 ， 这 将 会 导致 很 多 意 想 不 到 的 问题 ， 所 以 对 于 Cookies 的 使 用 一 定 要 满足 后 
台数 据 服 务 ， 同 时 要 在 知晓 的 情况 下 才 可 使 用 ， 切 记 避 免 滥 用 Cookies。 

现今 的 Web 应 用 需要 更 加 强大 的 数据 存储 方式 来 替代 早期 的 Cookies， 在 HTML 5 出 现 之 前 
已 经 有 很 多 相关 的 技术 解决 方案 , 如 Internet Explorer 的 User Data、Flash 的 Cookie、 谷 歌 的 Gears 
技术 等 ， 每 种 技术 都 有 自己 的 特点 和 局 限 ， 同 时 需要 不 同 插件 的 支持 ， 使 得 开发 人 员 需 要 消耗 大 
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量 的 时 间 和 精力 〈 成 本 ) 完成 这 些 Cookies 替代 方案 ， 维 护 成 本 攀升 。 在 4G 时 代 ，Web Storage 
出 现 得 非常 及 时 。 


6.1.2 ”Web 的 存储 方式 : LocalStorage 与 SessionStorage 


HTML 5 的 Web 存储 提供 了 两 种 客户 端 数据 存储 方式 :LocalStorage 和 SessionStorage。 
LocalStorage 主要 用 于 持久 化 的 本 地 存储 ， 除 非 主动 删除 数据 ， 和 否则 数据 永远 不 会 过 期 。 
SessionStorage 用 于 本 地 存储 1 个 会 话 过 程 中 的 数据 ， 这 些 数据 在 该 会 话 结束 时 一 同 销毁 ， 如 浏览 
器 关闭 ， 所 以 SessionStorage 不 是 一 种 持久 化 的 本 地 数据 存储 。 

SessionStorage 功能 被 实现 在 浏览 器 进程 的 内 存 中 ， 浏 览 器 关闭 后 自动 销毁 。LocalStorage 功 
能 是 一 种 持久 化 的 存储 ， 数 据 实际 上 被 放置 于 用 户 的 本 地 计算 机 ， 不 同 的 浏览 器 实现 的 
LocalStorage 存放 的 格式 和 位 置 也 不 相同 ， 表 6.1 列举 了 目前 主流 浏览 器 LocalStorage 数据 存放 形 
式 ， 以 Windows 系统 为 例 。 


表 6.1 主流 浏览 器 LocalStorage 数据 存放 形式 


Ci\Users\use\AppData\Roaming\Mozilla\Firefox\Profiles\tyraqe3f.default\we 
bappsstore.sqlite 

Ci\Users\use\AppData\Local\Google\Chrome\User Data\Default\Local 
Storage\ 

Ci\Users\use\AppData\Local\Microsoft\Intemet Explore\DOMStore\ 
Ci\Users\use\AppData\Local\Apple Computer\Safari\LocalStorage 


Ci\Users\use\AppData\Roaming\Opera\Opera\pstorage\ 


站 SQLite 是 一 款 轻型 的 数据 库 ， 遵 守 ACID 的 关联 式 数据 库 管理 系统 ， 主 要 用 于 内 入 式 系统 。 
| 目前 它 已 经 在 很 多 嵌入 式 产 品 中 使 用 ， 占 用 资源 非常 低 ， 在 嵌入 式 设备 中 ， 可 能 只 需要 几 百 
| “K” 的 内 存 就 够 了 。 


下 面 将 以 Windows 系统 下 Chrome 浏览 器 为 例 ， 查 询 用 户 本 地 的 LocalStorage 存储 信息 。 首 
先 在 浏览 器 内 打开 一 个 网 站 (如 http:/www.dianping.com)， 在 控制 台 输 入 测试 存储 的 LocalStorage 
信息 ， 代 码 如 下 : 


localStorage.setItem('1', 'test'); 


代码 执行 效果 如 图 6.1 所 示 。 
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上 海 美食 , 上 海 黎 厅 移 饮 


6 CC DD wm. dianping. com 


Elements Resources Network Sources Timeline Profiles Audits |Console| 


localStorage.setIten 


ae9 


<topframe>v 定 


图 6.1 储存 测试 LocalStorage 信息 


下 载 SQLite 用 于 打开 Chrome 浏览 器 本 地 LocalStorage 存储 ， 
下 载 页 面 如 图 6.2 所 示 。 


http://www.sqlite.org/download.html, 


多 SQLite Doruosd Paze x 和 = 
名 2 www. Sql ite. org, 


Precompiled Binaries for Windows 


A command-line shell for accessing and 


modifying SQLite databases, This program is 
compatible with all versions of SQLite through 
3.8.0.2 and beyond 

(shal: 
31727dc197303070b3cb03fa28d92d0d6bc565af) 


This ZIP archive contains a DLL for the SQLite 
library version 3.8.0.2 for 32-bit x86 processors 
Using the Win32 API, The DLL is built using 
SQLITE ENABLE COLUMN METADATA so that it 
is suitable for use with Ruby on Rails 

(shal: 
73849410ab5593d3659c049f76907d7316c7e607) 


图 62 下 载 SQLite 


地 址 为 


打开 本 地 目录 “CNUsers\fuser}\AppData\Local\Google\Chrome\User Data\Default\Local Storage” 其 
中 “fuser} ”按照 读者 本 地 用 户 而 定 ， 查 找 与 “www.dianping.com” 相 关 的 文件 ， 笔 者 计算 器 本 地 文 


件 名 为 “http www.dianping.com_0.localstorage”， 使 用 SQLite 打开 ， 如 图 6.3 所 示 。 


EC: Vindovs\systen32\cnd exe — 


sqlite3. exe “C:\Users\yae zhon 


图 6.3 使 用 SQLite 打开 本 地 LocalStorage 存储 文件 


从 图 中 可 以 找到 之 前 存 入 的 数据 ， 读 者 可 


信息 ， 马 上 动手 吧 。 
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以 参照 图 6.1 查找 其 他 浏览 器 本 地 的 LocalStorage 
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6.1.3 ”Web Storage 如 何 获 取 和 保存 数据 


HTML 5 的 Web 存储 提供 了 一 套 键 值 对 的 存储 模型 ， 同 时 对 于 不 同 网 站 ,数据 被 存储 于 不 同 
区 域 ， 并 且 1 个 域名 下 只 能 访问 自身 的 存储 数据 ， 在 安全 上 做 到 了 与 Cookies 同样 的 效果 。 存 储 
大 小 也 进行 了 调整 ， 现 在 开发 者 可 以 使 用 HTML 5 的 Web 存储 至 少 SMB 的 数据 ， 对 于 一 般 的 应 
用 来 说 已 经 绰绰有余 了 。 

HTML 5 的 Web 存储 一 共 提供 了 5 种 方法 ， 如 下 : 


e setltem(key,value): 添加 存储 键 值 对 ， 存 储 数据 为 字符 类 型 。 
egetitem(key) : 根据 key 获取 对 应 的 值 。 

e clear(): 清空 Web 存储 中 所 有 数据 。 

e removeltem(key) : 从 Web 存储 移 除 某 个 指定 键 值 对 应 数据 。 
e key(n) : 获取 第 mn 个 键 值 。 


下 面 以 LocalStorage 功能 介绍 具体 的 方法 使 用 ， 代 码 如 下 : 


读者 可 以 使 用 Chrome 浏览 器 ， 打 开 开发 者 工具 查看 被 存储 的 数据 ， 效 果 如 图 6.4 所 示 。 


Elements |Resources | Network Sources Timeline Profiles Audits » x 


PO Frames 

v Hweb SQL 

vw HIndexedDB 
v 国 Local Storage 


* 转 session Storage 
* 园 cookies 
本 围 Application Cache 


[= Q 
图 6.4 ”使 用 Chrome 浏览 器 查看 localStorage 数据 


Web 存储 中 的 key 方法 ， 用 于 获取 当前 域名 下 对 应 索引 序号 的 键 值 ， 游 标 默 认 从 0 开始 ， 如 
果 要 获取 之 前 存储 的 数据 键 值 ， 代 码 如 下 : 


想 要 删除 一 个 或 者 多 个 Web 存储 数据 可 以 使 用 removeltem 或 clear 方法 ， 代 码 如 下 : 
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白 . 2 网 站 本 地 存储 兼容 性 方案 


HTML 5 的 LocalStorage 功能 目前 只 能 在 高 级 的 浏览 器 上 使 用 ， 如 果 要 将 LocalStorage 在 网 站 应 
用 ， 需 要 考虑 到 历史 浏览 器 的 兼容 问题 。 前 面 已 经 介绍 使 用 Cookies 在 网 络 传输 和 浏览 器 上 的 瓶颈 和 
局 限 ， 下 面 将 介绍 笔者 编写 的 LocalStorage 类 库 ， 用 于 解决 不 同 浏览 器 的 兼容 问题 ， 代 码 如 下 : 
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F 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 5 
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本 类 库 依赖 于 JSON 和 jQuery， 读 者 可 以 使 用 DouglasCrockford 大 师 的 JSONjs 类 库 ， 前 往 
GitHub 下 载 ， 地 址 https://github.conydouglascrockford/JSON-js。 


该 类 库 支持 市 面 上 所 有 的 浏览 器 ， 包 括 移动 端 浏览 器 ， 表 6.2 列举 了 不 同 兼容 存储 技术 对 应 
的 浏览 器 类 别 。 


表 6.2 不 同 兼容 存储 技术 对 应 的 浏览 器 类 别 


IE 8+、Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10.5+、iPhone 2+、Android 2+ 
Firefox 2+、Firefox 2.x 、Firefox 3.0.x 


Seri3.1 ,Safiri 32 
IEs. 6.7 


代码 第 39~50 行 是 类 库 的 应 用 接口 和 属性 ， 提 供 了 6 个 方法 和 1 个 属性 ， 说 明 如 下 : 


@ clear: 清空 当前 域名 下 所 有 存储 数据 。 

e length: 获取 当前 域名 下 存储 的 键 值 对 个 数 。 

e getItem: 获取 当前 域名 某 个 键 值 的 数值 ， 传 递 的 第 3 个 参数 为 是 否 返回 JSON 格式 。 
e@ removeltem: 移 除 当 前 域名 下 某 个 键 值 对 。 

e setitem: 存储 键 值 对 到 当前 域名 ， 传 递 的 第 3 个 参数 表示 是 否 存储 为 JSON 格式 。 
eready: 类 库 准备 完毕 事件 回调 函数 。 
。 isReady: 类 库 是 否 准备 完毕 。 


与 传统 的 LocalStorage 不 同 ， 本 类 库 的 getItem 和 setltem 方法 允许 接收 JSON 格式 数据 ， 而 
传统 的 数据 格式 只 能 为 字符 串 ， 这 是 考虑 到 日 常 开发 的 使 用 ， 而 且 还 提供 了 length 方法 ， 方 便 开 
发 者 获取 存储 键 值 的 个 数 。 
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自 . 本 如 何在 实际 开发 中 使 用 本 地 存储 


虽然 HTML 5 的 Web 存储 技术 非常 强大 ， 但 并 不 能 完全 蔡 代 Cookies。Web 存储 是 一 种 完全 
作用 于 客户 端的 存储 技术 ， 无 法 随 着 客户 端 请 求 被 发 送 至 服务 器 ， 而 Cookies 可 以 作为 请 求 数据 
信息 被 发 送 到 后 端 服 务 器 进行 处 理 , 比如 最 常用 的 网 页 登录 信息 还 是 需要 通过 Cookies 来 做 实现 ， 
但 过 多 地 使 用 Cookies 是 一 种 低 效 的 做 法 , 甚至 会 引发 一 些 意 想不到 的 异常 问题 , HTML 5 的 Web 
存储 的 出 现 正 好 弥补 了 Cookies 的 这 些 缺 陷 。 

当 某 天 维护 的 网 站 新 上 了 一 个 产品 ， 作 为 网 站 的 产品 想 让 用 户 第 一 时 间 知 道 已 经 有 一 个 新 的 
功能 可 以 使 用 ， 这 时 候 需 要 制作 一 个 提示 框 用 来 提醒 用 户 使 用 。 产 品 需 求 方 可 以 接收 到 用 户 操作 
信息 , 当 用 户 关闭 提醒 时 , 只 针对 于 当前 使 用 的 浏览 器 类 型 ， 而 用 户 再 次 使 用 其 他 浏览 器 打开 时 ， 
提醒 仍然 会 出 现 。 下 面 将 结合 上 一 节 的 类 库 ， 通 过 示例 制作 这 一 功能 ， 代 码 如 下 : 
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使 用 Chrome 浏览 器 打开 示例 ， 效 果 如 图 6.5 所 示 。 


DD LocalStorage htn# x 
和 也 LQ 


网 站 有 新 功能 上 线 驻 ， 快 来 体验 吧 ! 


6.5 ”LocalStorage 示例 效果 图 


当 用 户 单 击 右 侧 关闭 按钮 时 ， 程 序 将 调用 LocalStorage 类 库 的 setItem 方法 ， 将 数据 “1” 存 
储 于 键 值 “HTML 5_close” 中 ， 下 次 打开 网 页 时 ， 首 先 会 获取 “HTML 5_close” 键 值 的 数据 ， 当 
发 现 数据 存在 时 就 不 显示 提示 信息 。 


日 .A 实例 1 : 保存 与 读 取 登录 用 户 名 与 密码 


对 于 常见 的 登录 页 面 ， 现 在 的 浏览 器 已 经 可 以 记录 每 次 登录 成 功 的 信息 ， 用 户 可 以 在 下 次 登 
录 时 ， 轻 松 地 输入 部 分 内 容 ， 补 充 完整 信息 即 可 登录 。 本 例 从 实际 出 发 ， 采 用 HTML 5 本 地 存储 
功能 模拟 浏览 器 这 个 过 程 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.6 所 示 。 在 “了 昵称 ”输入 框 和 “密码 ” 输 
入 框 内 输入 测试 用 户 信息 ， 昵 称 和 密码 均 为 “test”， 单 击 “ 登 录 ” 按 钮 ， 运 行 效果 如 图 6.7 所 示 。 


有 用 test 
所 证 人 | 
图 6.6 使 用 Chrome 打开 网 页 文件 图 6.7 输入 信息 单 击 “登录 ”按钮 


登录 后 ,“ 了 昵称 ”和 “密码 ”输入 信息 消失 。 单 击 “昵称 ”输入 框 ， 下 方 出 现下 拉 账 户 提示 ， 
内 容 为 刚刚 输入 的 “昵称 ”信息 ， 效 果 如 图 6.8 所 示 。 单 击 提示 框 内 “test” 账 号 ， 提 示 框 消失 ， 
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“昵称 ”和 “密码 ”输入 框 内 被 填 入 内 容 ， 效 果 与 图 6.7 相同 。 


p 工 
最 
图 6.8 “昵称 ”输入 框 下 方 出 现 账户 提示 信息 
创建 “保存 与 读 取 登录 用 户 名 与 密码 .html” 文 件 ， 代 码 如 下 : 
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本 例 的 存储 功能 使 用 HTML 5 的 LocalStorage 实现 ， 代 码 第 29 行 的 变量 storage_key 用 于 在 
本 地 存储 中 缓存 键 值 。 
第 30~34 行 代码 ， 监 听 下 拉 列 表 的 单 击 事件 ， 当 用 户 单 击 下 拉 框 内 账户 信息 时 ， 从 对 应 的 账 
户 DOM 元 素 节 点 中 获取 昵称 和 密码 ， 了 昵称 为 元 素 内 本 文 节点 内 容 ， 密 码 为 元 素 自 定义 属性 
“data-pass” 的 值 。 
第 35~40 行 代码 ， 监 听 表 单 提 交 事 件 ， 当 用 户 单 击 “ 登 录 ” 按 钮 提交 表单 内 容 ， 首 先 调用 
LocalStorage 的 getItem 方法 获取 键 值 为 storage_key 的 本 地 存储 的 内 容 ， 该 方法 语法 如 下 : 


获取 完毕 后 ， 调 用 JSON 的 parse 方法 将 字符 串 解析 为 JavaScript 对 象 字面 量 ， 并 存 入 表单 的 
昵称 和 密码 数据 ， 然 后 调用 LocalStorage 的 setItem 方法 进行 本 地 存储 ， 该 方法 语法 如 下 : 


LocalStorage 存储 的 对 象 必须 为 字符 型 ， 所 以 在 存储 之 前 ， 将 JavaScript 对 象 调用 JSON 的 
stringify 方法 进行 字符 序列 化 。 

代码 41~53 行 做 了 两 件 事情 ， 首 先 获取 本 地 存储 的 昵称 和 账号 信息 ， 生 成 下 拉 提 示 框 HTML 
结构 ， 然 后 监听 “昵称 ”输入 框 的 mousedown 和 blur 事件 ， 实 现 提示 框 出 现 和 消失 的 逻辑 。 


自 .5 实例 2 : 共享 存储 数据 


HTML 5 本 地 离线 存储 给 开发 人 员 带 来 了 很 大 的 想象 空间 ， 本 例 将 采用 LocalStorage 实现 一 
个 Web 版 PPT 展示 器 和 控制 器 相 结合 的 功能 。 示 例 一 共 由 两 个 页 面 组 成 ， 使 用 Chrome 浏览 器 新 
建 两 个 标签 页 ， 分 别 打开 展示 页 和 操作 页 (“存储 数据 的 共享 .html” 和 “存储 数据 的 共享 操作 
页 .html”)， 运 行 效果 如 图 6.9 所 示 。 
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图 6.9 使 用 Chrome 打开 展示 页 和 操作 页 
单 击 操作 页 面 “2” 区 域 ， 此 时 展示 页 切换 至 第 2 张 幻灯 片 ， 效 果 如 图 6.10 所 示 。 


己 | 回 | 去 


四 007, yxE5XADY96XE= x 入 
€ SC Drile:///E:/klit EN€ 3 Dfile:///E:/kliTr) 三 
二 


存储 数据 的 共享 操作 页 


图 610 单 击 操作 页 面 “2” 字 
通过 前 面 的 学 习 ， 读 者 可 以 想 想 这 个 例子 的 实现 方式 。 本 例 除了 采用 LocalStorage 实现 外 ， 
还 可 以 采用 传统 的 Cookie 方式 实现 但 就 Cookie 和 LocalStorage 在 日 常 开发 技术 上 的 选 型 问题 ， 
笔者 认为 LocalStorage 有 两 个 优势 : 


。 LocalStorage 存储 空间 达到 5MB， 而 Cookie 只 有 4KB。 
e@ Cookie 会 随 每 次 页 面 请 求 被 发 送 至 服务 器 端 ， 消 耗 带宽 ， 而 LocalStorage 不 会 被 发 送 至 服 


| Web 版 PPT 采 用 GitHub 上 开源 的 impress.js 项 目 ,项 目地 址 :https/github.conybartaz/impressjs。 


本 例 是 一 个 创意 型 的 案例 ， 技 术 层面 的 实现 非常 简单 ， 下 面 做 一 个 简要 的 分 析 。 首 先 看 PPT 
主体 展示 页 面 ， 约 灯 片 HTML 结构 代码 如 下 : 
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impressjs 项 目 默认 的 主 容器 ID 为 impress， 其 中 每 张 幻 灯 片 需要 含有 一 个 step 样式 类 ， 同 时 
可 以 在 每 张 幻灯 片 DIV 容器 上 设置 data-x、data-y 等 自 定义 属性 ， 表 示 CSS 3 Transform 的 相关 动 
画 设置 。 

主页 面 脚 本 代码 如 下 : 


每 100 毫秒 会 自动 通过 LocalStorage 读 取 本 地 离线 缓存 中 的 幻灯 片 序 号 ， 然 后 调用 幻灯 片 实 
例 的 goto 方法 ， 切 换 至 对 应 序号 的 幻灯 片 。impressijs 一 共有 4 个 API， 如 下 : 


init: 初始 化 页 面 ， 生 成 幻灯 片 。 
8goto: 前 往 对 应 页 的 幻灯 片 。 
prev: 回 退 至 上 一 页 幻灯 片 。 
next: 前 往 下 一 页 幻灯 片 。 


下 面 看 幻灯 片 操作 页 ， 代 码 如 下 : 
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幻灯 片 的 序号 存储 主要 逮 辑 由 监听 的 click 事件 完成 每 次 单 击 序号 区 域 都 会 获取 对 应 区 域 的 
编号 ， 然 后 存储 在 本 地 离线 缓存 键 值 slide_step 中 ， 详 见 代 码 第 22 行 。 


6.6 小 结 


本 章 复 习 了 Cookies 存储 的 缺点 ， 然 后 引出 了 HTML 5 存储 的 优点 ，HTML 5 存储 主要 有 两 
种 方式 : LocalStorage 与 SessionStorage。 读 者 需要 掌握 HMTLS5 存储 数据 的 原理 ， 并 学 会 使 用 
LocalStorage 存储 一 些 大 数量 的 数据 。 
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第 7 章 
< HTML 5 的 多 媒体 > 


音频 视频 作为 HTML 5 的 最 大 亮点 之 一 ， 解 决 了 常年 以 来 使 用 浏览 器 观看 视频 和 音频 都 不 得 
不 安装 Flash 的 窘境 。 随 着 HTML 5 的 发 展 ， 各 大 浏览 器 厂商 均 开 始 支持 HTML 5 音频 视频 技术 ， 
加 上 苹果 的 iOS 系统 禁止 使 用 Flash ,使 得 HIML 5 的 音频 视频 技术 在 这 几 年 内 得 到 了 飞速 的 发 展 ， 
各 大 主流 视频 网 站 纷纷 推出 了 完全 使 用 HTML 5 打造 的 视频 播放 器 。 使 用 HTML 5 的 音频 和 视频 
非常 简单 ， 只 需要 用 到 两 个 标签 audio 和 video。 


本 章 主 要 内 容 : 

e 了 和 解 音频 视频 的 进化 

ee 热 悉 市场 上 常见 的 音频 视频 格式 

ee 学习 HTML 5 的 两 个 标签 audio 和 video 
@ 打造 自己 的 音频 、 视 频 播放 器 


视频 的 进化 


在 很 久 以 前 ， 我 们 还 使 用 rmv、avi 等 视频 格式 ， 但 随 着 时 代 的 发 展 ，MP4 成 为 了 主流 ， 那 
在 网 页 上 ， 目 前 谁 是 视频 格式 的 王者 呢 ? 


7.1.1 常见 的 视频 格式 


目前 市 场 上 主要 的 视频 格式 有 : MP4、WebM 和 Ogv 等 。 

MP4 格式 在 视频 文件 中 已 经 随处 可 见 ，WebM 和 Ogv 大 家 应 该 还 相对 陌生 。WebM 是 一 个 开放 、 
免费 的 媒体 文件 格式 ， 最 早 由 谷歌 提出 ， 该 格式 容器 中 包括 了 VP8 和 Ogg Vorbis 音 轨 。WebM 格式 效 
率 非常 高 , 可 以 在 平板 电脑 和 其 他 一 些 手持 设备 上 流畅 地 使 用 。Ogv 即 带 有 Thedora 视频 编码 和 Vorbis 
音频 编码 的 Ogg 文件 ， 该 格式 文件 带 有 不 确定 的 版 权 问题 ， 可 能 在 未 来 的 浏览 器 中 被 慢 慢 淘汰 。 

各 种 格式 的 优 缺 点 不 一 ， 如 WebM 格式 ， 依 赖 于 Google 和 YouTube 的 推广 ， 并 且 在 硬件 上 
有 良好 的 支持 ， 但 是 由 于 涉及 MPEG LA 的 专利 案件 ， 并 且 在 iOS 设备 上 得 不 到 支持 。 虽 然 传 统 
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视频 和 音频 编码 技术 经 历 多 年 的 发 展 ， 并 且 相 当 稳 定 ， 但 对 于 浏览 器 中 原生 支持 视频 和 音频 还 非 
党 年轻， 仍然 遇 到 重重 阻碍 ， 不 过 规范 和 标准 日 益 完善 ， 如 果 读者 及 早 地 在 视频 和 音频 上 做 好 技 
术 准 备 ， 在 未 来 会 得 到 加 倍 的 回报 。 


7.1.2 ”传统 的 网 页 视频 与 HTML 5 视频 
下 面 通过 一 段 代码 ， 展 现在 各 种 新 老 版 本 浏览 器 上 如 何 使 用 视频 功能 ， 代 码 如 下 : 


如 果 在 HTML 5 中 使 用 视频 仅仅 使 用 一 个 <video> 标 签 和 几 个 属性 就 可 以 搞定 ， 其 中 control 
属性 用 来 添加 播放 、 和 暂停 和 音量 控件 ， 代 码 如 下 。 


也 可 以 通过 相应 的 属性 控制 视频 播放 器 的 高 度 和 宽度 ， 代 码 如 下 : 


表 7.1 给 出 了 <video> 标 签 支持 的 属性 。 
表 7.1 <video> 标 签 支持 的 属性 


autoplay | 视频 在 就 结 后 马上 播放 

加 控件 

像素 。 | 设置 视频 播放 器 的 高 度 

当 媒介 文件 完成 播放 后 再 次 开始 播放 

preload 。 |preload | 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 “autoplay”， 则 忽略 该 属性 。 
SrC url 地 址 | 要 播放 的 视频 的 URL 

width 。 | 像素 。 | 设置 视频 播放 器 的 宽度 
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了 .2 HTML 5 中 的 音频 


以 前 ， 网 页 上 的 大 多 数 音频 都 是 通过 Flash 插件 来 播放 的 ， 自 从 苹果 公司 宣布 不 支持 Flash 
开始 ， 浏 览 器 厂家 一 直 在 找寻 一 种 新 的 播放 形式 。HTML 5 规定 了 一 种 通过 audio 标签 来 包含 音 
频 的 标准 方法 ， 它 的 使 用 语法 如 下 : 


当前 ，audio 标签 支持 3 种 音频 格式 : MP3、Wav、Ogg。 
<audio> 的 属性 和 <video> 相 似 ， 但 是 不 包括 宽度 width 和 高 度 height 属性 。<audio> 可 以 同时 
包含 多 个 音频 格式 和 音频 文件 ， 代 码 如 下 : 


7.3 使 用 JavaScript 控制 播放 


HTML 5 除了 提供 audio 和 video 标签 播放 音频 和 视频 资源 外 , 同时 还 配套 提供 了 一 系列 的 方 
法 、 属 性 和 事件 ， 这 些 方法 、 属 性 和 事件 允许 使 用 JavaScript 操作 audio 和 video 对 象 。 
下 面 通过 一 个 简单 的 视频 播放 示例 介绍 部 分 视频 API 的 使 用 ， 代 码 如 下 : 
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该 示例 是 一 个 最 基本 的 使 用 JavaScript 操作 视频 元 素 的 例子 ， 其 中 用 到 了 2 个 关键 方法 play 
和 pause。 

在 实际 开发 中 ， 使 用 JavaScript 操作 视频 音频 元 素 往往 会 遇 到 很 多 浏览 器 的 差异 ， 读 者 可 以 
使 用 目前 比较 成 熟 的 第 三 方 视 频 音 频 类 库 解决 兼容 问题 ， 如 目前 比较 流行 的 基于 HTML 5 的 类 库 
video.js， 官 网 地 址 为 http://www.videojs.com/。 


了 .Aaudio 标签 和 video 标签 的 浏览 器 支持 情况 


使 用 audio 和 video 标签 的 第 一 步 是 要 了 解 浏览 器 的 支持 情况 , 就 目前 而 言 , Safari 和 Chrome 
的 支持 情况 最 好 ，Firefox 和 Opera 次 之 ，Intemet Explorer 表现 最 差 。 表 7.2 给 出 了 目前 浏览 器 的 
支持 状况 。 


表 7.2 主流 浏览 器 audio 和 video 支持 情况 


目前 主流 的 3 种 视频 格式 有 MP4、WebM 和 Ogg， 表 7.3 列 出 了 主流 浏览 器 的 支持 情况 。 
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表 7.3 主流 视频 格式 浏览 器 支持 情况 


as 
村 


Chrome 6+ 支持 支持 支持 
Firefox 3.6+ 不 支持 支持 支持 
Safari 5+ 支持 不 支持 不 支持 
Opera 10.6+ 不 支持 支持 支持 


主流 的 音频 格式 有 3 种 : MP3、Wav、Ogg， 表 7.4 列 出 了 主流 浏览 器 的 支持 情况 。 
表 7.4 主流 音频 格式 浏览 器 支持 情况 


BT 
加 


/ .了 音 视 频 的 实时 通信 


HTML 5 的 音 视 频 实 时 通信 即 WebRTC 技术 ， 它 是 Web Real-Time Communication 的 缩写 ， 
该 技术 主要 用 于 支持 浏览 器 进行 实时 的 语音 对 话 和 视频 通信 。 

在 2011 年 之 前 , 浏览 器 实现 语音 对 话 和 视频 通信 技术 , 需要 通过 安装 插件 或 者 客户 端 等 一 些 
技术 实现 , 不 论 对 于 用 户 还 是 开发 人 员 都 是 一 个 繁琐 和 复杂 的 过 程 , 并 且 还 受到 各 种 专利 的 影响 。 
谷歌 公司 在 2010 年 收购 了 Global IP Solutions 公司 从 而 获得 了 WebRTC 技术 ， 在 2011 年 ， 按 照 
BSD 协 议 把 该 技术 开源 , 同年 W3C 将 WebRTC 技术 纳入 HTML 5 成 为 标准 的 一 部 分 。 最 新 Android 
系统 上 的 Chrome 版 本 也 加 入 了 WebRTC 技术 。 

WebRTC 技术 可 以 让 Web 开发 者 轻松 地 在 浏览 器 上 开发 出 丰富 的 实时 媒体 应 用 , 帮助 网 页 应 
用 开发 语音 通话 、 视 频 聊 天 、P2P 文件 分 享 等 功能 ， 而 不 需要 安装 任何 插件 。 同 时 开发 者 也 不 需 
要 关心 多 媒体 的 数字 信号 处 理 过 程 ， 只 需要 使 用 JavaScript 即 可 实现 ， 图 7.1 为 WebRTC 的 技术 
架构 图 。 
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ED + eo cers GE Nbrowee rotors BEB Orerieote dy vorer nator 
图 7.1 WebRTC 的 技术 架构 图 
WebRTC 技术 由 3 部 分 组 成 : 


e MediaStream: 本 地 的 音频 视频 流 ， 或 者 来 自 远 端 浏览 器 的 音频 视频 流 。 
e@ PeerConnection: 执行 音频 视频 调用 ， 支 持 加 密 和 带宽 控制 。 
e DataChannel: 采用 点 对 点 传输 ， 传 输 常 规 数据 。 


下 面 通过 一 个 示例 演示 如 何 使 用 浏览 器 WebRTC， 代 码 如 下 : 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


将 上 述 代码 保存 成 后 缀 为 html 的 文件 ， 并 放 到 Web 服务 器 上 ， 如 IS、Apache、Nginx 等 。 
使 用 最 新 Chrome 浏览 器 打开 页 面 地 址 ， 浏 览 器 会 提示 是 否 启用 摄像 头 和 麦克 风 ， 如 图 7.2 所 示 。 


DD localhost/WebRTCDeno hl x 
€ 3 CC Dlocalhost/VebRTCDeno. htn 立 @ 


加 (http://1ocalhost/ 想 要 使 用 您 的 摄像 头 和 才 克 风 。 了 解 详情 


图 7.2 浏览 器 提示 是 否 启用 摄像 头 和 麦克 风 


单 击 浏览 器 提示 条 中 的 “允许 ”按钮 ， 此 时 浏览 器 内 出 现 一 个 宽 640 像素 、 高 480 像素 的 视 
频 窗 口 ， 显 示 内 容 为 用 户 摄像 头 拍摄 视频 。 

随 着 WebRTC 的 发 展 和 各 大 技术 巨头 的 支持 ,虽然 标准 尚未 完全 成 熟 , 但 足以 带 给 开发 者 前 
所 未 有 的 惊喜 ，Web 开发 人 员 可 以 完全 基于 浏览 器 开发 音频 视频 实时 在 线 应 用 。 目 前 ， 已 经 出 现 
了 一 批 颇具 实力 的 类 库 , 如 WebRTC.io 和 WebRTC-Experiment 等 , 用 户 可 以 前 往 这 些 项 目的 网 址 
学 习 和 使 用 ， 它 们 的 具体 网 址 分 别 为 https://github.com/webRTC/webRTC.io 以 及 
https://github.com/muaz-khan/WebRTC-Experiment。 


ee 元 BSD 协议 是 Berkeley Software Distribution 的 缩写 ， 中 文 意思 为 伯克利 软件 发 行 版 ， 是 一 整套 
软件 发 行 版 的 统称 ， 是 自由 软件 中 使 用 最 广泛 的 许可 证 之 一 。BSD 最 初 所 有 者 是 加 州 大 学 董 


事 会 。 该 协议 允许 用 户 自由 地 使 用 并 且 修改 源 代 码 ， 也 可 以 将 修改 后 的 代码 作为 开源 或 者 专 
利 软件 再 发 布 。 


了. 打造 自己 的 音频 播放 器 


本 节 将 使 用 HTML 5 的 新 标签 audio 编写 一 个 音频 播放 器 的 例子 ， 例 子 给 出 了 一 个 实现 简单 
在 线 音 频 播 放 器 的 场景 ， 用 户 可 以 单 击 播放 列表 进行 音乐 切换 。 
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使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 结果 如 图 7.3 所 示 。 单 击 列表 中 第 3 首 歌曲 
“LightMusic.mp3”， 然 后 单 击 左 下 角 播放 按钮 ， 运 行 效 果 如 图 7.4 所 示 。 


MaidyithTheFlaxenHair. np3 Maid¥ithTheFlaxenHair. mp3 


Lightltusic. mp3 


004 |) ==® 


图 7.3 使 用 Chrome 打开 网 页 文件 图 7.4 播放 “LightMusic.mp3” 
创建 “自己 的 在 线 音频 播放 器 .html” 文 件 ， 代 码 如 下 : 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 慎 


第 7 章 HTML 5 的 多 媒体 


61 audio.src = audio.src.replace (run.innerHTML，item.innerHTML) 7 
62 hj 

63 Ds 

64 </script> 

65 </html> 


代码 第 45 行 是 播放 器 的 核心 ， 使 用 了 HTML 5 新 标签 audio。 

代码 第 53 行 ， 获 取 播 放 列 表 中 的 文件 元 素 并 转化 为 数组 。 在 代码 第 55 行 ， 循 环 文件 数组 ， 
监听 每 个 元 素 的 click 事件 。 当 用 户 单 击 列表 文件 时 , 给 文件 添加 播放 的 样式 类 , 并 重新 设置 audio 
的 src 属性 。 此 时 ， 音 乐 被 切换 ， 并 且 所 有 播放 状态 被 重 置 为 初始 状态 。 


本 例 中 并 没有 提 及 audio 标签 自身 事件 的 相关 使 用 。audio 标签 拥有 比 一 般 标签 更 多 的 事件 状 
| 态 ， 比 如 pause、play、progress、waiting 等 。 用 户 可 以 通过 这 些 事件 ， 编 写 更 为 复杂 的 音频 
播放 器 。 


打造 自己 的 视频 播放 器 


前 面 的 例子 已 经 展示 HTML 5 带 来 的 video 标签 在 浏览 器 视频 应 用 上 的 突破 ， 摆 脱 了 传统 浏 
览 器 播放 视频 过 度 依赖 于 第 三 方 插件 的 局 面 。 虽 然 video 非常 美好 ， 但 各 种 浏览 器 对 视频 控件 的 
实现 不 同 , 在 原 有 的 面板 上 增加 自 定义 功能 更 是 难 上 加 难 。 本 例 将 初步 实现 一 个 自 定义 的 播放 器 ， 
给 各 位 读者 提供 一 个 思路 。 
本 例 播放 器 将 实现 3 个 基本 功能 : 播放 、 和 暂停 、 全 屏 。 使 用 Chrome 浏览 器 打开 网 页 文件 ， 
运行 结果 如 图 所 示 7.5 所 示 。 单 击 视频 中 央 的 播放 按钮 ， 运 行 结果 如 图 所 示 7.6 所 示 。 
加 


图 7.5 使 用 Chrome 打开 网 页 文件 图 7.6 单 击 视频 中 央 的 播放 按钮 


此 时 ， 中 央 的 播放 按钮 被 隐藏 ， 紧 随 着 出 现 视频 底部 工具 条 。 该 工具 条 并 非 浏览 器 原生 视频 
工具 条 ， 而 是 通过 HTML 进行 模拟 定制 。 如 图 7.6 所 示 ， 工 具 条 上 出 现 了 左下 角 和 暂停 按钮 和 右 下 
角 全 屏 按钮 。 


131 
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创建 “自己 的 视频 播放 器 .html” 文 件 ， 代 码 如 下 : 


第 7 章 HTML 5 的 多 媒体 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


代码 第 16~19 行 定义 了 工具 类 构造 函数 。 函 数 接收 1 个 参数 ， 该 参数 为 需要 加 入 自 定义 工具 
条 的 video 标签 。 
代码 第 20~76 行 ， 在 VideoControl 的 prototype 原型 上 增加 4 个 方法 ， 如 下 : 
init: 初始 化 函数 。 
_render: 生成 工具 条 HTML 结构 。 
_bind: 在 工具 条 元 素 上 绑 定 事件 。 
_requestFullscreen: video 标签 全 屏 方 法 。 


prototype 属性 是 JavaScript 面向 对 象 编程 的 基础 ， 如 果 对 其 还 不 是 很 了 解 的 话 ， 可 以 参考 
http://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx。 


_render 方法 将 字符 模板 CONTROLS_HTML 插入 对 应 的 video 父 节点 中 , 用 于 构建 工具 条 的 
DOM 结构 。 

_bind 方法 在 工具 条 的 外 围 容器 增加 事件 委托 ， 监 听 元 素 类 型 为 符合 选择 器 “div[data-type]” 
的 click 事件 。data-type 是 自 定义 的 元 素 属性 ， 表 示 播 放 按钮 的 类 型 。 本 例 中 共有 4 种 类 型 ， 如 下 : 


e 80: 初始 状态 中 央 的 大 三 角 按 钮 事件 类 型 。 
e play: 工具 条 播放 按钮 事件 类 型 。 
. 
. 


pause: 工具 条 暂停 按钮 事件 类 型 。 
fullscreen: 工具 条 全 屏 按钮 事件 类 型 


video 标签 的 播放 和 暂停 方法 ， 在 各 种 浏览 器 上 方法 名 相同 ， 分 别 为 play 和 pause。 但 全 屏 方 
法 由 于 还 处 于 草案 阶段 需要 加 上 对 应 浏览 器 的 前 级 名 代码 第 60~75 行 就 是 为 了 解决 这 个 问题 ， 
莱 容 方案 可 以 参考 代码 ， 这 里 不 做 过 多 说 明 。 


本 次 代码 分 析 主要 针对 示例 的 脚本 逻辑 ， 样 式 说 明 可 以 参考 配 书 源码 中 的 注释 。 
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7.8 ,等 


不 管 是 音频 还 是 视频 ， 网 络 上 的 格式 都 没有 一 个 统一 的 标准 ， 这 也 造成 了 目前 视频 播放 和 音 
频 播放 不 统一 的 局 面 ，HTML 5 提供 的 这 两 个 标签 也 不 能 完全 兼容 所 有 的 音 、 视 频 格式 ， 但 至 少 
已 经 向 统一 的 标准 迈 出 了 坚实 的 一 步 。 本 章 详细 介绍 了 音频 和 视频 标签 的 使 用 情况 ， 读 者 可 以 从 
最 后 两 个 例子 中 深入 认识 到 两 个 标签 给 音 、 视 频 开发 带 来 的 好 处 。 
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PhoneGap 是 一 款 基 于 HTML 5、CSS 3 和 JavaScript 创建 移动 应 用 程序 的 跨 平台 移动 开发 框 
架 。 它 使 得 开发 者 能 够 使 用 HTML 5 和 JavaScript 快速 地 构建 可 用 的 APP， 其 中 包括 对 地 理 位 置 、 
重力 感应 、 摄 像 头 等 硬件 设备 的 调用 。 此 外 ，PhoneGap 还 具有 无 与 伦比 的 跨 平台 可 移植 性 ， 可 以 
使 开发 者 逃离 令 人 烦躁 的 跨 平台 调试 与 适 配 工作 ， 将 更 多 的 精力 投入 到 产品 创新 上 。 此 外 ， 
PhoneGap 丰富 的 插件 也 具备 了 HTML 5 高 度 可 拓展 的 特点 ， 这 使 得 它 得 到 广泛 的 应 用 。 


本 章 主要 内 容 包括 : 

了 解 PhoneGap 的 发 展 

搭建 PhoneGap 的 开发 环境 

了 解 NodeJS 的 简单 使 用 
创建 第 一 个 跨 平台 PhoneGap 程序 


8. 1 走 近 PhoneGap 


PhoneGap 听 说 很 久 了 吧 ， 但 还 没 用 过 ， 那 就 从 PhoneGap 的 发 展 历史 和 特色 这 两 个 方面 来 认 


8.1.1 PhoneGap 的 发 展 历史 


随 着 移动 设备 的 崛起 ， 各 种 标准 也 纷繁 复杂 ， 支 持 苹果 手机 的 iOS 程序 开发 人 员 ， 要 想 将 
APP 布置 到 Android 设备 上 ， 简 直 可 以 直接 重新 写 代码 了 。 同 样 ，Android 开发 人 员 要 布置 APP 
到 苹果 设备 上 ， 也 很 头疼 ， 毕 竟 两 种 程序 可 不 是 一 种 开发 语言 ! 同时 ，HTMLS 支持 跨 平台 的 特 
性 让 Web APP 也 日 益 庞大 起 来 ， 而 且 开发 Web APP 比 开发 Android 和 iOS 程序 更 简单 ， 那 如 何 
用 Web 技术 来 开发 跨 平台 的 APP 程序 呢 ? 

于 是 PhoneGap 诞生 了 。PhoneGap 的 目的 是 让 Web 开发 者 所 熟悉 的 HTML、CSS、JavaScript 
技术 能 够 简单 地 部 署 在 移动 设备 上 ， 并 且 能 够 同 iPhone 实现 简单 的 功能 交互 (如 摄像 关 和 重力 感 
应 )。 


PhoneGap 一 经 发 布 ， 就 在 iOS 开发 者 中 间 流 行 起 来 。 虽 然 它 获得 了 许多 奖项 ， 但 PhoneGap 


截 


了 可 以 支持 Android 平台 的 框架 。 这 


止 到 2015 年 2 月 , PhoneGap 已 经 发 布 到 了 3.5 版 本 , 横 跨 Android、iOS、 塞 班 、BlackBerry、 


WebOS、Windows Phone 等 7 大 主流 平台 , 是 目前 唯一 做 到 一 次 部 署 全 平台 通用 的 移动 开发 框架 。 
图 8.1 生动 地 描述 了 PhoneGap 的 跨 平台 特性 。 


在 
发 人 员 
20 
20 


的 支持 。 


20 
移动 平 
之 间 犹 

20 
了 全 屏 

20 
括 了 新 


图 8.1 PhoneGap 的 跨 平台 特性 


PhoneGap 发 布 之 初 , 所 实现 的 仅仅 是 将 用 HTML 写成 的 页 面 加 载 到 APP 中 , 这 已 经 为 开 
带 来 了 不 少 方便 。 

1 年 7 月 29 日 发 布 的 PhoneGap 1.0 版 本 中 ， 开 始 加 入 了 对 API 的 支持 。 

1 年 10 月 1 日 PhoneGap 又 紧 接 着 发 布 了 PhoneGap 的 1.1.0 版 本 ,其 中 提供 了 对 BlackBerry 
1 年 10 月 4 日 ，Adobe 收购 了 PhoneGap， 并 表示 PhoneGap 比 Flash、HTML 5 更 适合 于 
台 , 而 在 基于 HTML 5 的 移动 开发 框架 中 , PhoneGap 一 定 是 最 出 众 的 , 在 HTML5 和 Flash 
了 牟 的 移动 开发 者 们 ， 完 全 可 以 选择 PhoneGap。 

3 年 1 月 PhoneGap 推出 了 2.3.3 版 本 ， 其 中 加 入 了 对 Windows Phone 8 的 支持 ， 同 时 加 入 
观看 视频 文件 的 API。 

3 年 8 月 20 日 , PhoneGap 发 布 了 3.0 版 本 (2.X 最 后 版 本 是 2.9.1)。 此 次 更 新 非常 大 ,， 包 
的 插件 架构 、 改 进 的 工具 、 新 的 平台 和 新 的 API。 在 3.0 中 ， 通 过 PhoneGap 命令 行 工 具 


CLI， 用 户 可 以 通过 节点 程序 包 管理 器 (NPM) 直接 安装 PhoneGap， 不 再 需要 在 每 次 更 新 时 下 载 
-个 ZIP 压缩 包 (2.X 统一 是 这 种 压缩 包 )。 图 8.2 显示 了 2X 和 3.0 以 上 版 本 的 区 别 。 
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Versioned 
Platform Plugin 


图 82 PhoneGap 的 跨 平台 特性 


从 3.0 开始 ， 大 部 分 人 已 经 不 太 关心 版 本 号 ， 因 为 下 载 的 不 是 压缩 包 ， 而 是 用 命令 行 直接 安 
装 。 本 书 内 容 支 持 使 用 3.X 以 上 的 版 本 。 


8.1.2 ”PhoneGap 的 特色 
在 PhoneGap 中 国 的 主页 上 , 由 文字 组 成 的 图 片 概括 了 PhoneGap 的 几 大 特色 , 如 图 8.3 所 示 。 


PhoneGap 是 一 能 够 让 你 用 普通 的 web 技 术 编写 出 能 
够 轻松 调用 API 接 口 和 进入 应 用 商店 的 HTML5 应 用 开 
发 平台 。 是 唯一 的 一 个 支持 7 个 平台 的 开源 移动 框 
架 。 它 的 优势 是 无 以 伦比 的 : 开发 成 本 低 一 一 据 估 
算 , 至 多 Native App 的 五 分 之 一 ! 
% 兼容 性 :完全 做 到 了 Written Once ,Run Everywhere! 
% 标准 化 ，PhoneGap 采 用 W3C 标 准 , Web App 直接 运 行 ! 
Ca gl 和 iOS 以 及 android 的 代码 加 XML 没 
! 


大 众 化 移动 互联 网 开发 平台 》》 了 解 更 多 
“郑重 训 条 移 ， 功 通 鼎 才 99 手 机 应 且 侯 渤 开 发 玫 辣 
* 精确 兼 雁 系 统 Andriod iPhone&iPad Symbain 
WM 
* 无 成 本 开发 ，20% 的 开发 周期 ，20% 的 升级 维护 成 本 
“完全 不 需要 手机 编程 基础 ， 只 要 会 HTML 就 能 做 应 用 


图 8.3 ”PhoneGap 的 特色 
下 面 将 分 条 解析 它们 的 精髓 。 


1. 快速 、 开 发 成 本 低 


PhoneGap 是 一 款 让 开发 者 使 用 普通 Web 技术 ， 编 写 出 能 轻松 调用 API 接口 和 进入 应 用 商店 
的 HTML 5 应 用 开发 平台 ， 是 唯一 一 个 支持 全 平台 的 开源 移动 框架 。PhoneGap 开发 成 本 低 , 据 估 
算 ， 其 成 本 顶 多 为 原生 APP 的 五 分 之 一 。 
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2. 兼容 性 


PhoneGap 完全 做 到 了 “Writen Once，Run Everywhere”。 也 就 是 开发 者 常 说 的 “一 次 部 署 ， 
多 平台 运行 ” 图 8.4 展示 了 PhoneGap 强大 的 跨 平 台 特 性 。 


UG 2 
© 上 
;Cs 可 an23ol> 


中 PhoneGap $3: BlackBerry. 


appcelerator® 局 symbian ( 交 
人 


8.4 PhoneGap 强大 的 跨 平台 特性 


在 图 中 可 以 清楚 地 看 到 ，PhoneGap 目前 已 经 可 以 支持 iDOS、Android、BlackBerry、Windows 
Phone、Symbian 、bada 以 及 Web OS 这 7 大 主流 操作 系统 。 


3. 标准 化 和 使 用 HTML 5+JavaScript 


PhoneGap 标准 化 中 提出 的 采用 W3C 标准 ， 其 实 就 是 指 采用 了 标准 HTML 5 进行 开发 。 
PhoneGap 将 这 两 点 (标准 化 和 使 用 HTML 5+JavaScript) 分 开 来 进行 强调 是 出 于 两 个 目的 : 


(1) 严 格 来 说 , W3C 标准 是 一 系列 标准 的 集合 , 包括 但 不 限于 HTML 5、CSS 3 还 有 JavaScript。 
除了 这 些 之 外 ，W3C 标准 还 包括 了 一 套 完 整 的 结构 、 表 现 、 行 为 以 及 命名 形式 等 。 将 这 两 点 区 分 
来 体现 出 了 PhoneGap 开发 团队 的 严谨 。 
(2) 从 另 一 个 角度 来 看 ， 也 可 能 是 PhoneGap 开发 团队 利用 了 W3C 标准 与 HTML 标准 界限 
模糊 的 “漏洞 5， 多 次 强调 同一 个 问题 以 制造 喷头 。 图 8.5 所 示 为 HTML 5 所 包含 的 范围 。 
从 图 中 不 难看 出 ，HTML 5 标准 在 广义 上 也 完全 可 以 与 W3C 标准 处 于 同一 个 等 级 上 的 ， 它 也 
包含 了 一 整套 结构 、 表 现 、 行 为 以 及 命名 形式 的 规定 。 


4. 大 众 化 移动 互联 网 开发 平台 


目前 许多 网 站 在 对 PhoneGap 进行 介绍 时 ， 总 会 将 主要 注意 力 放 在 上 面 提 到 的 3 点 上 ， 而 往 
往 忽 略 了 这 最 后 一 点 。 很 多 开发 者 因为 难以 忍受 一 遍 一 遍地 调试 才 选择 了 PhoneGap,， 因此 特别 看 
重 PhoneGap 开发 应 用 时 所 带 来 的 高 效 和 便捷 。 就 像 图 8.3 底部 所 介绍 的 “无 成 本 开发 ，20% 的 
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发 周期 ，20% 的 维护 成 本 ， 完 全 不 需要 手机 编程 基础 ， 只 要 会 HTML 就 能 做 应 用 ”。 


-] 四 
医 


图 8.5 HTML 5 所 涵盖 的 范围 


THTML5 只 二 人 开发 一 此 科 量 估 的 应 用 ， 如 新 闻 济 鉴 、 视 频 播放 ， 或 一 些 棋 和 类 的 | 
一 小 讲 戏 ， 所 以 如 果 有 人 想 要 开发 一 款 像 “极品 飞车 ”这 样 的 大 作 ， 使 用 PhoneGap 倒 也 不 是 
不 可 以 ,毕竟 WebGL 让 这 一 切 已 经 成 为 理论 上 的 可 能 ， 但 是 他 们 可 能 会 因为 开发 成 本 过 高 


或 学 习 成 本 过 高 而 放弃 。 


虽然 PhoneGap 开发 的 便捷 性 是 有 局 限 的 ， 因 为 它 毕 竞 是 一 款 “ 轻 量 级 架构 ”的 快速 手机 开 
发 平台 ， 但 是 只 要 它 真 实 有 效 地 提高 了 开发 者 的 开发 效率 ， 那 么 它 就 取得 了 一 席 之 地 。 


8.2 搭建 PhoneGap 的 开发 环境 


在 PhoneGap Desktop APP 出 现 之 前 ， 如 果 我 们 要 搭建 PhoneGap 的 开发 和 测试 环境 ， 那 简直 
可 以 让 人 直接 崩溃 ， 很 多 人 环境 还 没 搭建 好 ， 就 放弃 了 选择 PhoneGap。 如 果 要 做 Android 开发 ， 
那 就 要 搭建 好 Android 的 开发 环境 ;要 做 iOS 开发 ， 就 要 申请 苹果 开发 者 账号 ， 然 后 使 用 XCode 
进行 开发 ， 而 大 多 数 熟 悉 HTML5 的 Web APP 开发 人 员 都 只 会 前 端 技术 ， 这 就 增加 了 环境 配置 的 
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难度 。 而 现在 ， 一 切 都 变 简单 了 ， 就 因为 PhoneGap Desktop APP， 且 看 本 节 详 细 介绍 ， 实 际 就 3 
步 : 安装 NodeJS、 安 装 PhoneGap 和 安装 PhoneGap Desktop APP。 


8.2.1 安装 NodeJS 


因为 PhoneGap 从 3.X 开始 就 取消 了 下 载 安装 包 ， 都 是 统一 使 用 NodeJS 的 npm 命令 来 安装 ， 
所 以 要 使 用 PhoneGap 最 新 版 本 ， 必 须 下 载 NodeJS。 
下 载 和 安装 NodeJS 的 步骤 如 下 : 


人 ED) 打开 Nodejs 的 官方 网 站 ( nodejs.org )， 首 页 就 有 一 个 INSTALL 按钮 ， 单 击 它 就 可 以 下 
载 最 新 版 本 的 msi 安装 文件 。 

人 2 双击 下 载 到 的 node.msi 文件 即 可 打开 如 图 8.6 所 示 的 Setup 安装 界面 ， 一 路 单 击 Next 
按钮 即 可 ， 安 装 目录 可 以 选择 默认 安装 路 径 。 


和食 node. js Setup [一 [GTX 


Welcome to the node.js Setup Wizard 


[a Ei d e ] The Setup Wizard will install node.js on your computer, Clck 
Next to continue or Cancel to exit the Setup Wizard. 


8.6 NodeJS 安装 界面 


区 趣 | 对 于 已 经 安装 过 旧版 Nodejs 的 用 户 ， 新 版 本 会 自动 敌 盖 旧版 本 。 | 


03 安装 完成 后 ， 如 果 是 默认 安装 路 径 ， 一 般 会 在 C:\Program Files 看 到 nodejs 文件 夹 ， 而 
且 在 Windows 操作 系统 的 “开始 菜单 | 所 有 程序 ”中 会 看 到 NodeJS 的 命令 行 工具 。 
仅仅 看 到 这 些 还 不 够 ， 我 们 可 以 打开 NodeJS 的 命令 行 工具 〈“ 开 始 菜单 所 有 程序 INodejs| 
Nodejs command prompt”)， 如 图 8.7 所 示 。 使 用 node -v 查看 到 当前 Nodejs 的 版 本 号 ， 如 果 能 
正确 看 到 版 本 号 ， 恭 喜 你 已 经 安装 成 功 ! 
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:Msersstina6?node —u 
8.12.8 


:sers\tina6>, 


图 8.7 NodeJS 命令 行 界面 


| 正常 情况 下 安装 后 ，node -v 命令 可 以 在 任何 目录 下 运行 ， 如 果 发 现 不 能 运行 ， 可 以 完全 印 载 
EE Nodejs 后 重新 安装 或 重新 安装 一 个 不 同 的 版 本 。 


读者 不 会 NodeJS 也 没有 关系 ， 因 为 这 里 我 们 只 用 到 简单 的 几 个 命令 和 参数 。 


8.2.2 安装 PhoneGap 


安装 好 NodeJS 后 ， 我 们 就 可 以 使 用 npm 命令 来 安装 PhoneGap 了 。 
(1) 还 是 打开 NodeJS 的 命令 行 界面 ， 输 入 如 下 命令 : 
npm install -g phonegap 


install 是 安装 某 个 软件 包 ，-g 参数 是 指 安 装 在 全 局 目录 中 ，phonegap 就 是 要 安装 的 软件 名 称 
了 。 


输入 命令 并 回 车 后 ， 开 始 安装 程序 ， 这 个 过 程 比较 慢 〈 视 服务 器 网 速决 定 )， 大 约 过 10 分 钟 


后 安装 完成 ， 图 8.8 和 图 8.9 所 示 都 是 安装 过 程 中 的 一 些 信息 ， 我 们 可 以 从 中 了 解 PhoneGap 都 安 
装 了 哪些 API。 


install -9g phonegap 
pnel 


站 -4-28: wanted: 《"node":">-9-8"-"npnm'":'v1" 7 Ccurrent 
"ewe.5.1")> 


cordova-jsB3.7.3: wanted: "node":""g.18.x") Ccurrent: 
"2.5.1")> 
builder@2.2.1: wanted: "node":"@.8.x 11 9.19.x"》《c 
"22.5.1"> 
deflate-crc32-strean@g.1.2: nodule has been nerged 


> wsee.4.31 install C:\Jsers\tina6 AppData\Roaning\npn\node_nodules \pho 
_nodules \connect-phonegap node_nodules\socket .io\node_nodules\engine.i 
dules ws 


> Cnode-gyp rebuild 2> builderror.log> 1! Cexit 8)> 


:Wsers\tina6 AppData\Roaning npn\node_nodules \phonegap\node_nodules\c 
onegap\node_nodules\socket .io\node_nodules\engine .io\node_nodules \ws)no 
ogran Files\nodejs\node_nodules npn\hin\node-gyp-bin\\..\. .node_nodule 
bp\hin\node-gyp.js” rebuild 

站 


图 8.8 ”安装 过 程 界面 1 
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colorsB0.6.8-1s\ws>node "C:\Program Files\nodejs\node_modules npn\hin\nod 
| 一 一 pluralize@0.9.4nodules \node-gyp\bin node-gyp.js" rebuild 
senver@1 .1.0 
minimistee-1-B 
qzecode-tezrminaleB.9 .4 
shelljsee.1.4 | 
上 prompteB.2.11 (revalidatoreB.1.8。pkginfoeB.3-9。reade1.B.5。winstonee.6- 
» utilee0.2.1> 
上 一 一 phonegap-builde@.9.1 (colorse0.6.2, qrcode-terninale@.8.0,. optinist@9.3.7 
shelljseB.B.9。phonegap-build-apieB-3.3》 

cordovaB@4.2.8 CunderscoreB1.7.8,. qB1.8.1, noptB@3.0.1, cordova-libe4.2.8> 
—— connect-phonegapBB-14-8 (hone-dirBeB-1-2。connect-~injecteB-3-2。ipBB-3-1- 
cpeB.6.8。finditB2.8.8。request-progressBB.3.1。http-proxye1-8-1。shelljseB.2.6 
1， tarBB.1.19。PequestB2.33.9。gazeBB.4.3。node-staticBB.7-9。1localtunnelel.3.9. 
hivueree.189.1。useragente2.9-8。connecte2.12.-8。 socket-ioel.8-47> 


图 8.9 安装 过 程 界面 2 


(2) 安装 中 会 出 现 几 个 Warning, 我 们 可 以 直接 忽略 , 安装 完成 后 , 可 以 直接 输入 “phonegap” 
来 测试 是 否 安 装 成 功 ， 如 果 效 果 和 图 8.10 所 示 差 不 多 ， 就 表示 安装 成 功 了 ， 如 果 提示 “不 是 内 部 
或 外 部 命令 ” 则 表示 安装 有 问题 。 


[Wode. js command prompt 


F: \>phonegap 

sage: phonegap [options] [connands] 
Description: 

PhoneGap comnand-line tool. 
ommands : 


help [connand] output usage infornation 肿 
create 《path> create a phonegap project 

build <platforms》 build the project for a specific platform 
install platforns> install the project on for a specific platform 
run Cplatforms> build and install the project for a specific plat 
platforn [comnand] update a platform version 

plugin [connand] add, renove, and list plugins 

template [connand] list available app tenplates 

info display information about the project 

serve serve a phonegap project 

version output version nunber 


图 8.10 ”安装 成 功 后 的 测试 


如 果 在 npm 安装 时 忘记 输入 -名 参数 ， 则 表示 在 当前 目录 中 安装 ， 不 是 全 局 安装 。 全 局 安装 的 
| 意思 就 是 不 管 你 在 哪个 目录 下 ， 都 可 以 调用 phonegap 命令 。 


(3) 安 装 完 PhoneGap 后 ,我 们 可 以 在 “C:\Users\ 用 户 名 \AppData\Roamingnpm\node_modules” 
目录 下 看 到 phonegap 文件 夹 ， 其 内 容 如 图 8.11 所 示 。 
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点 bin 2015/72716 1:13 文件 夹 
县 aoc 2015/2/18 1:13 文件 夹 
点 1lib 2015/72716 1:13 文件 夹 
node_nodules 2015/2/16 1:13 文件 来 
县 :ee 2015/2/16 1:13 文件 夹 
.npnienore 201572716 1:13 PMIGNORE 文件 1 
.travis. ml 2015/2716 1:13 YL 文件 1 区 
LL CONTRIBUTING. md 2015/2716 1:13 邑 文 件 1 
LL) coPYRITGHT 2015/2/16 1:13 文件 18 
[] TcERSE 2015/2/16 1:13 文件 12 28 
LL WOTICE 2015/2/18 1:13 文件 1 
国 package. json 2015/2/16 1:13 JSON 文件 3 名 
LL READNE. nd 2015/2/16 1:13 邑 文件 8 


图 8.11 PhoneGap 的 文件 


此 时 PhoneGap 就 安装 完成 了 ， 如 果 你 已 经 有 Android 的 开发 环境 ， 那 可 以 加 载 这 些 lib 库 进 
行 开发 ， 如 果 你 已 经 有 XCode 的 开发 环境 ， 也 可 以 调用 这 些 文件 进行 开发 。 但 是 对 于 部 分 Web 
开发 者 而 言 ,这些 环境 都 没有 怎么 办 呢 ? 好 在 PhoneGap 提供 了 PhoneGap Desktop APP 测试 工具 ， 
我 们 再 也 不 用 为 搭建 复杂 的 移动 开发 环境 而 担忧 了 ， 下 一 小 节 我 们 将 介绍 一 下 PhoneGap Desktop 
APP。 


8.2.3 安装 PhoneGap Desktop APP 进行 测试 
PhoneGap Desktop APP 是 PhoneGap 提供 的 测试 工具 ， 它 是 一 个 可 以 下 载 的 安装 包 ， 要 使 用 
这 个 测试 工具 ， 要 在 PC 端 和 移动 设备 端 各 安装 一 个 软件 : 
e PC 端的 是 PhoneGap Desktop APP， 下 载 地 址 是 : http://phonegap.com/blog/2014/12/11/ 
phonegap-desktop-app-beta/。 
@ 移动 设备 端 下 载 的 是 一 个 名 为 PhoneGap Developer 的 APP， 不 同 设备 下 载 此 APP 的 位 置 
不 同 ， 参 见 图 8.12 所 示 。 


DOWNLOAD FROM DOWNLOAD FROM DOWNLOAD FROM THE 


THEAPPSIORE GOOGLE PLAY WINDOWS PHONE STORE 


8.12 不 同 设备 下 载 APP 的 地 方 
1. PC 端的 PhoneGap Desktop APP 安装 
先 来 看 PC 上 的 PhoneGap Desktop APP 安装 。 


(1) 下 载 的 Desktop APP 是 个 压缩 包 PhoneGap-Desktop-Beta-0.1.1-win， 首 先 解压 ， 解 压 后 
的 效果 如 图 8.13 所 示 。 
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DD locsles 2015/2/16 2:33 文件 夹 

图 ffnpegsuno. dl 2014712710 21:23 ”应 用 程序 扩展 929 到 
Licudtl. dat 2014/12710 21:23 。 DAT 文件 9747 玛 
图 libgcL ql 2014/12/10 21:23 ”应 用 程序 扩展 126 玛 
图 libGLESv2. dl 2014/12/10 21:23 ”应 用 程序 扩展 851 EB 
mw.pak 2014712710 21:23 PAK 文件 4,620 IB 
呵 PhoneGap. exe 2014/12/10 21:24 ”应 用 程序 57,983 IB 


8.13 ”PhoneGap Desktop APP 的 文件 


从 下 载 下 来 的 压缩 包 名 字 可 以 知道 ， 我 们 使 用 的 Desktop APP 版 本 是 0.11 Beta 版 ， 因 为 这 个 
工具 刚刚 发 布 没有 多 久 ， 目 前 使 用 的 人 还 非常 少 。 不 过 使 用 它 可 以 省 略 很 多 繁琐 的 配置 ， 笔 
者 相信 ， 这 个 工具 会 越 来 越 受 欢迎 。 


(2) 此 时 ， 我 们 根本 不 用 安装 ， 可 以 直接 打开 PhoneGap.exe 文件 ， 效 果 如 图 8.14 所 示 。 测 


试 界面 中 已 经 有 两 个 APP 了 ， 这 都 是 笔者 自己 建立 的 ， 如 果 是 初次 打开 ， 右 侧 界面 是 空 的 。 


Serverisrunning on http://unknown:3000 


图 8.14 ”Desktop APP 运行 界面 


打开 的 时 间 可 能 会 很 慢 ， 不 知道 是 由 于 bug 问题 ， 还 是 笔者 机 器 的 问题 ， 如 果 打 开 几 分 钟 后 
还 没 看 到 运行 效果 ， 请 耐心 等 待 。 当 然 ， 也 许 读者 看 到 书 时 ， 有 更 新 的 版 本 已 经 解决 了 这 个 
问题 。 
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通过 + 号 我 们 可 以 创建 新 的 APP 程序 ,通过 -号 我 们 可 以 删除 已 经 创建 的 APP 程序 ,通过 Server 
log 我 们 还 可 以 查看 服务 端的 工作 日 志 。 


| 如 果 双 击 phonegap.exe， 出 现 的 是 一 个 网 页 ， 显示 NODE WEBKIT， 可 能 是 你 NODEJS 没有 
| 安装 ， 或 者 未 安装 成 功 。 


2. 移动 设备 端的 PhoneGap DeveloperAPP 安装 
移动 设备 端的 安装 比较 简单 ， 我 们 这 里 以 苹果 终端 来 介绍 。 


(1) 到 苹果 商店 ， 搜 索 PhoneGap Developer 并 下 载 。 
(2) 下 载 完成 后 , 运行 这 个 应 用 , 效果 如 图 8.15 所 示 , 这 里 需要 输入 测试 端口 , 默认 是 3000。 
具体 怎么 使 用 ， 我 们 下 一 节 再 介绍 。 


ht 


图 8.15 ”Developer APP 运行 界面 


加 ,二 ”创建 第 一 个 PhoneGap APP 


有 了 Desktop APP， 创 建 PhoneGap APP 其 实 很 简单 ， 下 面 看 一 下 详细 的 步骤 。 


人 Ri) 打开 Desktop APP， 单 击 左 侧 的 + 号 ， 出 来 两 个 菜单 ， 一 个 是 Create new (新建 APP )， 
一 个 是 Add exiting ( 加 载 原 有 的 APP ) 单 击 “ 新 建 ”菜单 ， 打 开创 建 APP 的 界面 , 效 
果 如 图 8.16 所 示 。 
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Name: 


helloworld 


ID: 


图 8.16 创建 PhoneGap APP 


e@ 在 Local path 中 ， 要 通过 Choose 按钮 来 选择 APP 存放 的 目录 ( Beta 版 本 中 这 个 过 程 特别 
慢 ， 请 读者 耐心 等 待 ) 。 

e 在 Name 中 ， 输 入 这 个 APP 的 名 称 。 

e@ 在 ID 中 ， 输 入 命名 空间 ， 这 里 可 不 填写 。 


人 2 输入 完成 后 ， 单 击 Create project 按钮 ， 如 果 创建 成 功 ， 效 果 如 图 8.17 所 示 。 界 面 下 方 
是 一 个 绿色 方 框 ， 显 示 “Serveris running...” 这 表示 成 功 。 如 果 创 建 不 成 功 ， 下 方 是 一 
个 灰色 方 框 ， 显 示 “Serveris offline”。 创 建成 功 后 ，APP 项 目的 文件 结构 如 图 8.18 所 
示 ， 所 有 的 页 面 文件 都 在 www 文件 夹 下 。 
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绿色 成 功 ， 灰 色 失 败 


Serverisrunning on http://unknown:3000 


8.17 创建 APP 成 功 


.Cordova 2015/2/16 2:42 
hooks 2015/2/16 2:42 
platforms 2015/2/16 2:42 


Ww 2015/2/16 2:42 


19 
Bb 
点 
Dplugins 2015/2/16 2:42 
9 
总 config xml 2015/2/16 2:42 


图 8.18 APP 项 目 结构 


村 | http 后 面 应 该 显示 的 是 一 个 IP 地 址 , 但 笔者 这 个 测试 版 本 显示 的 是 unknown, 可 能 是 Beta 版 
| 的 bug。 如 果 读 者 也 是 显示 这 个 ， 可 以 继续 下 面 的 步骤 来 确定 这 个 IP 地 址 是 多 少 。 


C03 ”创建 成 功 后 ， 打 开 手 机 上 的 Developer APP， 输 入 正确 的 IP， 如 192.168.1.104:3000， 如 
图 8.19 所 示 。 然 后 单 击 Connect 按钮 进行 连接 , 连接 成 功 后 , 先 显示 Success， 如 图 8.20 
所 示 。 很 快 就 会 显示 正确 的 APP 效果 ， 如 图 8.21 所 示 。 
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JEBMS 8 PRIVACY JERMS & PRIVACY 


图 8.19 输入 服务 端 全 图 820 ”成功 连接 服务 端 


HELLO WORLD 


CONNECTING TO DEVICE 


图 8.21 APP 成 功 显示 


FT04 如 果 读 者 显示 的 IP 是 unknown， 则 打开 NODEJS 命令 行 ， 将 目录 变更 到 当前 新 创建 的 
APP 所 在 的 目录 (使 用 命令 cd， 如 cd fcode\helloworld )， 然 后 输入 phonegap serve， 则 
会 显示 服务 端正 确 的 IP 地 址 ， 如 图 8.22 所 示 ， 然 后 在 手机 上 输入 这 个 IP 地 址 ，APP 
效果 和 图 8.21 所 示 的 一 样 。 
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Node. js command prompt 一 phonegap serve 


Rour environment has been set up for using Node.js 0.12.9 《ia32》and npn. 


:sers\tina6 fF: 
F:\Ycd F:\hook\helloworld\helloworld 


F:\hook\he llowor1ld\helloworld>phonegap serve 


[phonegap] ctrl-e to stop the server 
[phonegap] 


图 822 获取 Server 端 的 他 


笔者 这 里 显示 的 是 Hello World, 读者 显示 的 不 是 ,因为 笔者 更 改 了 项 目下 的 index.html 文件 。 
打开 新 建 APP 所 在 的 文件 来， 找到 www/index.html， 将 <h1l> 标 签 内 的 文字 改 为 Hello World 
即 可 。 


此 时 ， 我 们 新 建 的 APP 就 创建 完成 ， 而 且 测试 成 功 了 。 这 里 有 几 个 注意 事项 : 


@ 新 建 的 APP 文件 在 你 创建 项 目 时 所 选择 的 文件 夹 下 。 这 个 文件 夹 下 包含 了 APP 所 需要 的 
js、css、img 等 素材 文件 ， 整 个 目录 结构 看 起 来 和 一 个 网 站 文件 的 目录 结构 一 样 。 
@ 默认 显示 的 网 页 是 index.html 一 样 ， 我 们 可 以 通过 修改 这 个 html 文件 的 内 容 来 显示 不 同 


的 APP 效果 。 
日 更 新 index.html 后 ， 一 旦 保存 文件 ， 手 机 端 会 立刻 出 现 更 新 效果 ， 不 用 再 进行 任何 编译 操 
作 。 


说 到 这 里 ， 读 者 还 没有 看 到 index.html 是 什么 样 的 结构 ， 这 里 给 出 一 个 完整 的 index.html 结 
构图 ， 具 体 每 个 标签 的 意思 ， 随 着 我 们 学 习 的 深入 ， 相 信 读 者 都 能 看 懂 ， 这 里 先 不 介绍 了 。 
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8.4 PhoneGap Desktop APP 常见 的 几 个 错误 


虽然 使 用 Desktop APP 不 用 配置 环境 ， 操 作 就 这 么 几 步 ， 但 还 是 有 人 难 倒 在 这 个 入 门 的 门槛 
上 ， 这 里 笔者 总 结 几 个 常见 的 不 能 正常 使 用 Desktop APP 的 原因 。 


(1) 提示 找 不 到 config.xml。 如 果 运 行 时 提示 找 不 到 config.xml， 可 以 手动 创建 这 个 文件 ， 
放 在 当前 APP 项 目的 根 目录 下 。 

(2) 服务 端 和 手机 端 始 终 无 法 连接 ， 要 确认 一 下 两 个 设备 是 否 在 同一 个 局 域 网 内 。 

(3) 手机 操作 系统 版 本 太 旧 ， 可 能 无 法 显示 index.html 网 页 ， 这 个 可 以 参看 index.html 中 的 
注释 ， 如 iOS 7 版 本 使 用 index.html 时 ， 就 需要 移 除 width=device-width 和 height=device-height 这 
两 个 属性 。 

因为 操作 系统 的 不 同 、 网 络 连接 的 不 同 、 移 动 终端 的 不 同 ， 大 家 在 学 习 时 可 能 会 碰 到 不 同 的 
问题 ， 碰 到 问题 时 ， 一 定 要 仔细 找 找 原 因 。 也 许 碰 到 的 只 是 一 个 小 小 的 疏忽 ， 就 可 能 会 折腾 半天 ， 
这 些 都 是 难免 的 ， 希 望 读者 能 在 PhoneGap 入 门 阶 段 ， 不 断 克 服 这 些小 障碍 。 
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8.5 PhoneGap 你 要 知道 的 知识 


PhoneGap 的 环境 搭建 好 了 ， 在 开始 学 习 API 的 调用 以 前 ， 我 们 先 了 解 使 用 什么 样 的 开发 工 
具 来 创建 PhoneGap 文件 ， 并 了 解 PhoneGap 都 包含 了 哪些 API。 


8.5.1 编辑 工具 的 选择 


首先 要 介绍 的 是 Notepad++ 编 辑 器 ， 在 Notepad++ 中 能 够 通过 “Ctrl” 键 和 鼠标 滚轮 方便 地 切 
换 字 体 的 大 小 ， 这 种 做 法 会 让 开发 者 觉得 非常 舒服 。 但 是 有 些 时 候 Notepad++ 却 不 是 那么 合格 ， 
比如 说 当 一 个 页 面 中 同时 有 CSS、HTML 和 JavaScript 存在 时 ，Notepad 并 不 能 将 它们 全 部 识别 并 
且 高 亮 显示 ， 而 只 能 高 亮 标 注 其 中 的 一 种 代码 ， 如 图 8.23 所 示 。 
Hx<head> 
H<script> 
Ffunction open news(i) { 


document .getElementById( 
document .getElementById( 


.style.display=" 
") .style.display=" 


} 

Hfunction back list() { 
document .getElementById ("list" 
document .getElementById ("news" 


.style.display=" 
.Style.display=" 


} 

</script> 

Fx<style> 

* { margin:0;} 

#head 
width:100%; 
height:60px; 
background:#567; 
font-size:32px; 
Color:#fff; 
line-height:60px; 
text-align:center; 


图 8.23 页 面 中 出 现 两 种 以 上 的 脚本 时 Notepad++ 的 高 亮 支 持 


其 次 推荐 Dreamweaver 作为 编辑 器 , 很 多 人 制作 网 页 都 是 从 这 款 工具 开始 的 , 编辑 PhoneGap 
也 可 以 用 它 。 不 管 是 Dreamweaver 还 是 PhoneGap 甚至 是 jQuery Mobile， 它 们 都 有 共同 的 一 个 老 
板 一 一 Adobe。 因 此 ， 使 用 Dreamweaver 就 合情合理 了 。 另 外 ， 在 Dreamweaver CS 6 中 也 提供 了 
对 PhoneGap 的 支持 (如 图 8.24 所 示 ), 不 过 使 用 方式 稍 显 繁琐 , 因为 它 涉及 移动 开发 的 一 些 SDK， 
不 过 我 们 可 以 仅仅 使 用 它 来 编写 HTML 文件 ， 还 是 很 方便 的 。 
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打开 最 近 的 项 目 

ECiOjqm first html 至 HTML 请 | C555 新吉 功能 概述 
Clojgm buton ht ColdFusion FE 

杰 066 2html 到 PE 上 砚 中 坷 SFH 布 

过 clojqm_test2html 要 css 加 |] Business carays 创作 
finder html 到 Jamscipt a 
vatided ht 至 xd hi 
日 3 忆 流体 同 格 布局 和 加] Qey ceaee 析 


8.24 Dreamweaver CS6 为 PhoneGap 提供 的 支持 


当然 ， 如 果 不 希望 使 用 这 些 工 具 ， 还 可 以 在 记事 本 中 编写 PhoneGap, 但 笔者 觉得 ， 如 果 修 改 
程序 用 记事 本 还 可 以 ， 如 果 从 零 开始 进行 编辑 ， 则 还 是 使 用 专业 编辑 工具 来 得 更 顺手 。 


8.5.2 PhoneGap 中 有 哪些 API 


其 实 PhoneGap 的 作用 就 是 将 HTML 写成 的 页 面 显示 出 来 ， 然 后 通过 特定 的 JavaScript 获取 
几 组 数据 而 已 。 

虽然 说 使 用 PhoneGap 进行 开发 主要 是 依靠 HTML 各 方面 的 知识 ， 但 对 于 一 名 PhoneGap 开 
发 者 来 说 ， 最 主要 的 还 是 掌握 PhoneGap 各 种 API 的 用 法 。PhoneGap 为 开发 者 提供 了 电池 状态 、 
相机 、 联 系 人 、 文 件 系 统 、 音 频 等 API 接口 ， 本 小 节 将 一 一 介绍 它们 的 功能 和 用 途 。 

1. Device Motion (Accelerometer) ( 加 速度 传感器 ) 

Accelerometer 也 就 是 一 般 我 们 常 说 的 重力 感应 ， 可 以 用 它 来 获取 手机 各 个 方向 的 加 速度 。 比 
如 , 可 以 利用 重力 加 速度 约 等 于 10 的 特点 来 获取 当前 手机 的 方向 , 可 以 在 一 些 游戏 中 利用 它 和 一 
些 算 法 实现 体感 操作 (如 说 模拟 用 户 对 方向 盘 的 操作 )。 


2. Camera ( 摄像 头 ) 
Camera 正如 它 的 字面 意思 ， 可 以 通过 它 来 获取 摄像 头 采集 到 的 信息 。 
3. Device Orientation (Compass) ( 指南 针 ) 


如 果 说 加 速度 传感器 是 用 来 感应 重力 从 而 知道 地 面 方向 的 话 ， 那 么 指南 针 则 可 以 获取 东西 南 
北 的 方向 ， 可 以 通过 它 和 加 速度 传感器 、 地 理 位 置 传感器 配合 起 来 实现 一 些 很 神奇 的 功能 ， 比 如 
从 用 户 当 前 正 拍摄 的 照片 中 得 知 用 户 所 在 的 方位 等 。 
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这 听 上 去 非常 玄幻 ， 但 是 却 并 不 是 无 法 实现 的 ， 比 如 ， 从 地 理 位 置 传感器 上 获取 的 信息 表示 
用 户 正在 海边 ， 指 南 针 又 能 够 证 明 用 户 正面 朝 大 海 ， 那 么 甚至 不 需要 对 照片 进行 分 析 都 可 以 判断 
出 用 户 所 拍摄 照片 的 内 容 了 。 


4. Network Information (Connection) ( 网 络 连 接 ) 

Connection 判断 用 户 所 处 的 网 络 状态 。 

5. Contacts ( 联系 人 ) 

Contacts 对 设备 上 的 联系 人 进行 增 、 删 、 改 、 查 ， 是 非常 实用 的 一 组 API。 

6. Device ( 获取 设备 信息 ) 

Device 可 以 获取 设备 的 版 本 号 、 操 作 系 统 等 信息 。 

7. Events ( 系统 事件 ) 

Events 是 一 些 对 系统 时 间 进行 响应 的 回调 函数 ， 比 如 在 用 户 电量 过 低 时 发 出 通知 ， 也 可 以 对 
音量 键 或 搜索 键 等 功能 进行 响应 。 

8. FileSystem ( 文件 管理 系统 ) 

可 以 通过 FileSystem 来 管理 手机 上 的 文件 ， 但 是 由 于 PhoneGap 的 执行 效率 问题 ， 不 建议 读 
者 尝试 用 它 来 开发 一 款 文件 管理 器 ， 甚 至 是 简单 的 电子 书 阅读 器 。 在 应 用 中 使 用 FileSystem 来 对 
文件 进行 一 些 简单 的 操作 《〈 比 如 在 txt 中 保存 一 些 留言 或 笔记 ) 还 是 可 以 的 。 

9. Geolocation ( 地 理 位 置 传感器 ) 

Geolocation 是 通常 用 户 所 说 的 GPS， 社交 软件 中 比较 常用 的 一 项 功能 ， 通 常会 配合 其 他 传 感 
器 使 用 。 

10. Media ( 媒体 ) 

Media 用 于 对 音频 文件 进行 录制 和 播放 ， 感 觉 不 如 采集 工具 实用 ， 因 此 也 比较 鸡肋 。 


坊 PhoneGap 提供 的 APL 有 20 几 种 ， 而 且 还 全 直下 多 ， 本 小 节 只 列 出 了 常见 的 这 10 种 。 ”| 


8.5.3 ”使 用 云 在 线 编译 PhoneGap 
PhoneGap 不 仅 提供 了 好 的 真 机 测试 工具 ， 还 提供 了 一 个 在 线 编译 工具 ， 网 址 是 : 


https://build.phonegap.com/ 
PhoneGap Build 工具 的 使 用 很 简单 ， 前 提 是 必须 注册 一 个 PhoneGap 账号 ， 然 后 上 传代 码 的 
zip 包 。 


PhoneGap Build 是 收费 服务 ,但 可 以 提供 一 个 APP 免费 编译 的 服务 ， 所 以 如 果 只 是 开发 一 个 
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APP， 那 使 用 它 未 尝 不 可 ， 这 一 个 APP， 也 可 以 随时 通过 更 新 代码 来 重新 编译 。 当 然 如 果 是 企业 
行为 ， 会 开发 多 个 APP， 那 要 么 创建 原生 的 开发 环境 来 编译 ， 要 么 使 用 PhoneGap Build 的 收费 服 
务 。 

PhoneGap Build 的 使 用 非常 简单 ， 我 们 只 需要 压缩 我 们 的 项 目 成 zip 文件 ， 然 后 上 传 ， 上 传 
后 ， 出 现 图 8.25 所 示 的 界面 ， 在 界面 下 方 会 有 iOS、Windows Phone 和 安 卓 三 种 设备 的 编译 方式 
供 选择 ， 编 译 完成 后 ， 我 们 可 以 下 载 每 个 项 目 后 面 的 软件 ， 如 安 卓 后 面 的 apk 文件 。 


Your application has updated and a build has been queued 


in PG Build App 


EE - 


直 Update code | | 禾 Rebuld oan 


SD: : gors Xsemm 


AppD Veryon PhoneOap Ownedby 


los Nokeyselected ~ | [reouo] 从 | ie [Bsn +o EE 
四 Nopublsherl ~ [全 sum| Kin EE 


iotae wz -加 ne 电玩 x 


图 8.25 ”在线 编译 


在 PhoneGap 中 调试 HTML 5 程序 


我 们 已 经 配置 好 了 PhoneGap, 现在 找到 第 3 章 创建 的 一 个 简单 的 HTML 5 文件 “响应 式 导航 
样 例 代 码 .html” 将 其 放 在 已 经 配置 好 的 PhoneGap helloworld 项 目下 的 www 目录 中 , 删除 原来 的 
index.html 文件 ， 并 将 “响应 式 导 航 样 例 代码 .html” 名 字 改 为 index.html 文件 。 

这 里 有 一 点 还 要 修改 ， 因 为 <meta> 标 签 中 有 专门 为 移动 设备 兼容 设计 的 一 些 代码 ， 所 以 需要 
将 HTML 5 文件 中 的 <meta> 标 签 修改 成 和 原来 的 index.html 中 的 <meta> 标 签 一 样 : 


<meta charset="utf-8" /> 
<meta name="format-detection" content="telephone=no" /> 
<meta name="msapplication-tap-highlight" content="no" /> 
<meta name="viewport" content="user-scalable=no, 
initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, 
height=device-height, target-densitydpi=device-dpi" /> 
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接 下 来 ， 打 开 服务 器 端的 PhoneGap Desktop APP，helloworld 项 目的 服务 开启 后 ， 然 后 打开 
手机 上 的 PhoneGap APP， 测 试 效 果 如 图 8.26 所 示 。 


8.26 手机 上 打开 HTML 5 页 面 


| 我 们 可 以 看 到 ， 一 个 HTML 5 页 面 显示 在 手机 上 之 后 ， 页 面 顶端 与 手机 的 顶部 任务 栏 有 一 点 
| 重合 , 这 些 可 以 通过 设置 CSS 样式 文件 来 改变 , 此 处 不 再 多 讲 , 大 家 可 以 自己 动手 实验 一 下 。 


,了 小 结 


本 章 的 重点 是 了 解 PhoneGap 的 发 展 历史 ， 然 后 搭建 PhoneGap 的 开发 环境 。 读 者 要 了 解 
PhoneGap Desktop APP 的 使 用 方法 ， 利 用 它 可 以 轻松 地 测试 我 们 创建 好 的 APP， 而 且 这 些 跨 平台 
的 程序 ， 在 一 部 设备 上 能 使 用 ， 基 本 上 在 其 他 设备 上 不 需要 经 过 修改 也 能 使 用 ， 但 要 兼容 所 有 的 
设备 和 所 有 的 版 本 ， 还 需要 我 们 不 断 努 力 。 
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第 9 章 
<PhoneGap 的 事件 处 理 > 


本 章 将 引入 手机 应 用 中 一 个 非常 重要 的 概念 : “生命 周期 ”。 可 以 说 只 有 真正 了 解 PhoneGap 
的 生命 周期 ， 才 算是 真正 入 了 PhoneGap 的 门 。 此 外 ， 本 章 还 要 教会 读者 一 些 在 进行 PhoneGap 
发 时 的 必 备 技能 ， 比 如 输出 信息 的 3 种 方法 等 等 。 


本 章 的 主要 内 容 包括 : 

@ 认识 程序 的 生命 膨 期 

e@ 认识 PhoneGap 的 生命 周期 

e@ PhoneGap 生命 周期 中 11 种 本 地 事件 的 概念 和 应 用 
e@ 在 PhoneGap 开发 中 获取 调试 信息 的 3 种 方法 


程序 也 有 生命 周期 


对 于 人 类 来 说 ， 有 一 个 生命 周期 ， 就 是 从 出 生 ? 童 年 期 ?青年 期 ?中 年 期 ?老年 期 3 死亡。 
对 于 程序 来 说 ， 它 也 有 从 “出 生 ” 到 “死亡 ”的 周期 ， 本 节 将 介绍 这 个 生命 周期 。 


9.1.1 程序 对 生命 周期 的 定义 


图 9.1 所 示 是 一 个 类 的 生命 周期 ， 这 是 谷歌 官方 给 出 的 Activity 生命 周期 流程 图 ， 它 包括 了 
-个 安 卓 应 用 从 被 创建 到 结束 时 所 经 历 的 各 种 事件 。Activity 生命 周期 中 所 经 历 的 各 个 过 程 说 明 

如 下 。 

(1) 启动 Activity: 系统 将 调用 onCreate 方法 创建 新 的 Activity 对 象 ， 然 后 依次 调用 onStart 
方法 和 onResume 方法 ， 使 刚刚 创建 的 Activity 进入 运行 状态 。 

(2) 暂停 状态 : 当前 的 Activity 被 其 他 的 Activity 覆盖 或 手机 锁 屏 ， 原 Activity 被 放 入 后 台 ， 
系统 将 调用 onPause 方法 ， 使 Activity 进入 暂停 状态 。 

(3) 恢复 状态 : 当 处 于 暂停 状态 的 Activity 重新 被 运行 时 ， 系 统 将 调用 onResume 方法 ， 使 
之 重新 回 到 运行 状态 。 
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(4) 后 台 状态 : 当 用 户 点 击 Home 键 返回 主屏 , Activity 被 保存 在 后 台 , 系统 将 先 调用 onPause 
方法 再 调用 onStop 方法 ， 使 Activity 处 于 暂停 状态 。 

(5) 返回 状态 : 当 用 户 重 新 打开 Activity 时 ， 系 统 会 先 调用 onRestar 方法 ， 再 调用 onStar 
方法 ， 最 后 调用 onResume 方法 ， 使 应 用 返回 到 运行 状态 。 

(6) 当前 Activity 处 于 被 覆盖 状态 或 者 后 台 不 可 见 状 态 , 即 第 2 步 和 第 4 步 ,系统 内 存 不 足 ， 
杀 死 当前 Activity， 而 后 用 户 退 回 当前 Activity， 再 次 调用 onCreate 方法 、onStart 方法 、onResume 
方法 ， 进 入 运行 状态 。 

(7) 用 户 退 出 当前 Activity: 系统 先 调用 onPause 方法 ， 然 后 调用 onStop 方法 ， 最 后 调用 
onDestory 方法 ， 结 束 当前 Activity。 


9.1 Activity 类 的 生命 周期 


通过 对 这 个 类 从 创建 到 消亡 的 整个 过 程 的 了 解 ， 我 们 知道 了 程序 都 是 有 生命 周期 的 ， 那 
PhoneGap 中 的 生命 周期 是 怎么 回 事 呢 ? 
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9.1.2 “PhoneGap 的 生命 周期 


在 PhoneGap 中 ， 系 统 通过 JavaScript 来 获取 来 自 于 硬件 的 信息 。 目 前 ，PhoneGap 可 以 处 理 
包括 网 络 、 电 量 、 音 量 、 网 络 、 按 钮 等 方面 的 信息 。 当 使 用 PhoneGap 编写 的 应 用 处 于 运行 状态 
时 ,如果 系统 接收 到 了 某 种 信号 (比如 用 户 按 下 了 音量 键 )， 那么 系统 就 能 够 做 出 相应 的 反馈 。 这 
种 接收 信号 并 进行 反馈 的 过 程 ， 就 是 我 们 开发 人 员 常 说 的 事件 ， 即 发 生 了 一 件 事情 ， 我 们 要 进行 
哪些 处 理 。 


PhoneGap 的 生命 周期 只 包括 应 用 在 屏幕 中 运行 的 一 部 分 ， 当 应 用 被 暂停 和 重新 运行 时 有 
pause 事件 和 resume 事件 来 与 它们 对 应 。 
PhoneGap 的 整个 生命 周期 可 以 划分 成 15 种 不 同 的 事件 ， 如 表 9.1 所 示 。 
表 9.1 PhoneGap 生命 周期 中 的 事件 
名 称 说 明 
deviceready 当 设 备 加 载 完 毕 后 会 触发 该 事件 
pause 当 程 序 被 暂停 到 后 台 运 行 时 会 触发 该 事件 
resume 当 程 序 被 从 后 台 激活 到 前 台 运 行 时 会 触发 该 事件 
online 当 设 备 网 络 状态 改变 且 是 从 网 络 断 开 状 态 切 换 到 连接 状态 时 触发 此 事件 
offline 当 设 备 网 络 状态 改变 且 为 从 网 络 连接 状态 切换 到 断 开 状态 时 触发 该 事件 
batterycritical 当 设备 电量 过 低 超过 了 某 个 临界 点 时 该 事件 被 触发 ， 临 界 点 的 值 由 设备 决 
定 ， 一 般 为 10% 
batterylow 当 设 备 剩余 电量 低 于 某 个 由 开发 者 或 用 户 指定 的 值 时 该 事件 被 触发 
batterystatus 当 电 池 剩 余 电 量 发 生 1% 的 改变 时 会 触发 该 事件 
backbutton 当 用 户 点 击 “ 返 回 ” 按 钮 时 该 事件 被 触发 
menubutton 当 用 户 点 击 “ 菜 单 ” 按 钮 时 会 触发 该 事件 
startcallbutton 当 用 户 “ 按 下 ”通话 按钮 时 会 触发 该 事件 
endcallbutton 当 用 户 点 击 “ 挂 断 ” 按 钮 时 会 触发 该 事件 
volumedownbutton 当 用 户 按 下 “音量 减 小 ”按钮 时 会 触发 该 事件 
volumeupbutton 当 用 户 按 下 “音量 增 大 ”按钮 时 会 触发 该 事件 
searchbutton 当 用 户 按 下 “搜索 ”按钮 时 触发 该 事件 


上 面 的 表 可 以 按照 事件 的 性 质 将 它们 重新 分 组 ， 按 照 笔者 的 想法 这 15 个 事件 可 以 分 为 以 下 3 
类 。 
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1. 程序 加 载 事件 


程序 加 载 事 件 包括 了 deviceready、pause 和 resume 这 3 个 事件 ， 用 于 对 程序 的 加 载 完毕 〈 即 
生命 周期 的 开始 )、 暂 停 和 恢复 进行 处 理 。 

2. 被 动 消息 事件 

被 动 消息 事件 用 于 对 程序 运行 期 间 设 备 发 生 的 一 些 变化 进行 处 理 ， 如 电池 电量 的 变化 、 网 络 
断 开 等 。 被动 消息 事件 包括 以 下 5 个 事件 : online、 offline、 batterycritical、 batterylow、batterystatus。 
由 于 这 些 事 件 不 是 用 户 本 人 可 以 控制 的 ， 如 电池 的 电量 不 可 能 由 于 用 户 的 意愿 而 突然 增加 。 因 此 
笔者 称 其 为 被 动 消息 事件 。 


3. 主动 消息 事件 


主动 消息 事件 包括 backbutton、menubutton、startcallbutton、endcallbutton、volumedownbutton、 
volumeupbutton 和 searchbutton 这 7 个 事件 ， 分 别 在 用 户 按 下 相应 的 按钮 时 进行 响应 。 

需要 注意 的 是 ， 并 不 是 每 部 设备 都 具备 这 些 按钮 ， 比 如 在 诺基亚 最 新 发 布 的 Nokia X 手机 中 

就 只 有 正面 地 返回 按钮 以 及 侧面 的 音量 键 。 因 此 ， 如 果 想 在 这 样 的 设备 中 对 “搜索 ”按钮 的 操作 

进行 处 理 是 不 可 能 的 。 而 即使 是 在 目前 主流 的 安 卓 手机 中 ， 一 般 也 省 略 掉 了 “搜索 键 ” 而 仅 保 留 

“返回 和 “菜单 ”以 及 在 PhoneGap 中 没有 提 到 的 “HOME” 按 钮 这 3 种 按键 ， 如 图 9.2 中 所 示 。 


图 9.2 这 种 3 按钮 布局 已 成 为 当前 安 卓 手 机 的 主流 设计 


事件 实战 


事件 其 实 都 比较 简单 ， 只 要 学 会 了 一 种 的 使 用 方式 ， 其 他 的 事件 都 可 以 轻松 学 会 ， 本 节 以 
PhoneGap 所 有 的 事件 为 例 ， 介 绍 了 如 何 真正 在 APP 中 调用 事件 ， 其 实 有 些 事件 在 你 的 手机 上 不 
一 定 调用 成 功 〈 并 不 是 所 有 的 事件 都 支持 你 的 移动 设备 )， 这 里 读者 重点 是 学 会 事件 的 使 用 方法 。 
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9.2.1 使 用 程序 加 载 事 件 


在 了 解 了 PhoneGap 中 都 有 哪些 事件 之 后 ， 本 节 将 开始 对 这 些 事件 的 用 法 进行 详细 介绍 。 本 
节 要 介绍 的 是 程序 加 载 事 件 ， 也 就 是 deviceready、pause 和 resume 这 3 个 事件 。 

首先 来 看 一 个 例子 ， 这 里 省 略 了 HTML 标签 和 META 标签 ， 读 者 可 参考 源 代 码 ， 或 参考 自 
动 生成 的 index.html 文件 中 的 代码 : 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


从 第 2 行 代码 可 以 看 出 ， 如 果 要 使 用 PhoneGap， 必 须 先 引入 cordova.js 文件 ， 这 个 js 包含 了 
PhoneGap 的 所 有 相关 API。 


必 却 在 引用 jQuery 时 ， 添 加 的 是 jieryjs 文件 ， 这 里 要 注意 ， 添 加 的 文件 可 不 是 phoneapjs。 | 


程序 运行 之 后 ， 系 统 会 自动 加 载 PhoneGap 中 的 脚本 ,然后 弹出 如 图 9.3 所 示 的 界面 , 表明 设 
备 加 载 完毕 。 当 用 户 点 击 “ 返 回 ” 按 钮 或 “HOME” 按 钮 时 ， 也 会 弹出 相应 的 对 话 框 ， 如 图 9.4 
所 示 ， 但 是 不 等 笔者 反应 过 来 点 击 “确定 ”按钮 ， 程 序 就 已 经 被 置 入 后 台 了 。 


Alert Alert 


设备 加 载 完毕 ! 程序 被 暂停 了 ! 


图 9.3 设备 加 载 完毕 后 弹出 对 话 框 图 94 程序 被 暂停 时 同样 弹出 对 话 框 提示 


按 道 理 来 说 ， 如 果 此 时 再 运行 该 程序 也 会 弹出 相应 的 对 话 框 来 ， 但 是 真相 是 当 再 次 运行 该 程 
序 时 ， 却 没有 弹出 对 话 框 提示 “程序 被 恢复 ”， 这 不 是 由 于 写 错 了 某 段 代码 导致 的 ， 而 是 由 于 
PhoneGap 的 某 些 特定 调用 关系 所 决定 的 。 

下 面 结合 本 范例 来 说 明 PhoneGap 中 各 个 事件 的 使 用 方法 ， 通 过 范例 的 第 4 行 、11 行 和 13 
行 可 以 看 出 ， 在 PhoneGap 中 如 果 想 对 某 个 事件 进行 操作 ， 只 需要 按照 
document.addEventListener("eventname",function ，false): 这 样 的 格式 进行 定义 就 可 以 了 。 其 中 
eventname 是 需要 定义 的 事件 名 称 ，function 是 负责 对 该 事件 进行 响应 的 自 定义 函数 。 


仔细 观察 范例 ， 可 以 发 现 一 个 有 意思 的 问题 ， 那 就 是 对 pause 和 resume 两 个 事件 的 声明 是 在 
| 设备 加 载 完毕 之 后 进行 的 ， 这 是 一 个 非常 好 的 习惯 ， 每 一 个 PhoneGap 开发 者 都 要 努力 适应 
这 个 习惯 。 


我 们 可 以 自己 创建 一 个 index.html, 保存 在 上 一 章 创建 好 的 helloworld APP 中 进行 测试 , 也 可 
以 在 PhoneGap Desktop APP 中 新 建 一 个 项 目 ， 然 后 修改 所 建 项 目 中 的 index.html 文件 。 修 改 时 要 
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注意 ， 不 要 使 用 原来 的 index.js 文件 和 css 文件 等 。 本 例 没 有 样式 ， 也 没 用 单独 的 js 文件 。 


9.2.2 ”使 用 被 动 消息 事件 


本 节 将 继续 介绍 PhoneGap 中 的 另 一 类 事件 :被动 消息 事件 。 这 类 事件 有 一 个 共同 的 特点 是 
非常 难以 调试 。 比 如 ， 如 果 想 要 对 batterycritical 事件 进行 测试 ， 可 能 就 只 有 等 到 电量 下 降 到 某 个 
程度 才 可 以 得 到 结果 ， 尤 其 是 这 些 数据 还 无 法 利用 虚拟 机 进行 模拟 。 另 外 ， 这 类 事件 在 使 用 上 往 
往 还 比较 鸡肋 ， 比 如 ， 开 发 者 对 电量 事件 的 使 用 不 外 乎 是 ， 当 电量 低 到 一 定 程度 时 提醒 用 户 充电 ， 
可 是 实际 上 安 卓 系统 或 苹果 系统 本 身 也 会 做 同样 的 事情 。 因 此 开发 者 尽量 不 使 用 这 类 事件 。 

虽然 会 避免 使 用 它们 ， 但 是 该 介绍 的 知识 点 一 个 也 不 能 少 。 看 下 面 例子 。 
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28 function onBatteryCritical (info) { 

29 alert ("电量 过 低 ， 还 剩 : " + info.level + "%"); 
30 } 

31 // 电池 电量 过 低 触发 此 函数 

32 function onBatteryLow(info) { 

33 alert ("电量 过 低 , 还 剩 : " + info.level + "%"); 
34 } 

35 // 电池 状态 发 生 改 变 触发 此 函数 

36 function onBatteryStatus (info) { 

37 alert ("电池 状态 改变 了 ， 剩 余 电量 : " + info.level + "g") 7 
38 } 

39 </script> 

40 

41 <body> 

42 <h1> 被 动 消息 事件 的 使 用 </h1> 

43 </body> 


运行 之 后 的 结果 如 图 9.5 所 示 。 


Alert 


电池 状态 改变 了 ， 剩 余 电量 : 47% 


9.5 ”电池 状态 改变 时 弹出 对 话 框 


这 一 组 事件 的 使 用 方法 与 之 前 介绍 的 一 样 ， 但 是 在 电池 事件 的 回调 函数 中 加 入 了 人 参数， 这 里 
使 用 的 info 对 象 (如 第 28 行 所 示 ) 封装 了 相关 电量 的 一 些 信息 。 它 包含 了 两 个 属性 , 分别 是 level 
(用 于 记录 当前 电量 的 百 分 值 ， 取 值 范 围 为 从 0 到 100) 和 isPlugged〈 用 于 记录 当前 是 否 为 充电 
状态 )。 
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由 于 这 类 事件 非常 难以 捕捉 ,在 测试 时 可 以 将 具体 的 函数 操作 写 在 batterystatus 事件 的 回调 函 
数 中 进行 测试 ， 测 试 完成 后 再 移 回 它 该 待 的 地 方 就 可 以 了 。 


9.2.3 使 用 主动 消息 事件 


与 上 一 小 节 介绍 的 事件 相 比 ， 本 节 要 介绍 的 7 个 事件 简直 是 平易 近 人 ， 因 为 直接 通过 点 击 按 
钮 就 可 以 对 它们 进行 测试 。 它 们 的 使 用 方法 与 前 面 介绍 的 事件 完全 一 样 ， 下 面 是 使 用 这 些 事件 的 
一 外 例子 : 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


程序 运行 之 后 ， 依 次 按 下 各 按钮 可 以 看 到 相应 的 对 话 框 弹出 ， 最 后 的 结果 如 图 9.6、 图 9.7 所 


ll 


Alert 


菜单 按钮 被 按 下 


返回 按钮 被 按 下 


图 9.6 菜单 按钮 被 按 下 图 9.7 返回 按钮 被 按 下 
其 他 按钮 也 是 类 似 ， 不 过 需要 注意 的 是 ， 这 里 所 说 的 按钮 必须 是 实体 或 专门 的 虚拟 按钮 才 有 
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效 。 比 如 ， 图 9.8 所 示 的 平板 电脑 的 虚拟 返回 键 是 有 效 的 ， 但 是 在 一 些 应 用 中 的 “返回 ”按钮 是 
不 能 触发 backbutton 事件 的 。 


此 姓 的 您 拟 键 与 实体 
按钮 具有 本 条 的 效果 


图 9.8 某 款 平板 电脑 中 的 虚拟 键 
最 后 需要 说 明 的 是 ， 对 音量 增 和 音量 减 按钮 的 触发 事件 ， 由 于 与 系统 本 身 的 音量 功能 冲突 ， 
所 以 在 大 多 数 的 场合 下 是 无 效 的 。 另 外 ,目前 的 大 多 数 手机 已 经 没有 了 通话 按钮 和 通话 结束 按钮， 
因此 这 两 个 事件 目前 只 支持 BlackBerry 平台 。 
最 后 还 是 要 废话 一 句 ， 虽 然 PhoneGap 为 开发 者 提供 了 各 种 事件 ， 但 是 除了 deviceready 在 开 | 


发 中 有 着 广泛 的 应 用 之 外 ， 其 他 事件 的 应 用 价值 不 大 。 因 此 ， 还 请 各 位 开发 者 能 够 以 理性 的 
态度 使 用 它们 。 


PhoneGap 中 文 乱码 的 解决 方案 


因为 中 文 的 格式 问题 ， 在 进行 网 页 或 移动 设备 开发 时 ， 经 常会 磁 到 中 文 乱码 问题 ， 解 决 方案 
也 五 花 八 门 , 有 的 是 将 页 面 设置 成 gb2312 中 文 简体 格式 ， 有 的 是 设置 成 gbk 格式 ， 有 的 要 求 统一 
页 面 都 是 utf-8 格式 。 

不 管 是 网 页 还 是 移动 网 页 ， 不 管 是 Native APP, 还 是 Web APP， 其 实 有 一 个 最 终 的 解决 方案 ， 
那 就 是 所 有 文件 统一 为 utf-8 格式 。 

下 面 3 种 修改 编码 的 方式 ， 有 1 种 不 对 都 可 能 导致 页 面 有 乱码 ， 如 果 前 面 3 个 案例 ， 你 都 出 
现 了 乱码 ， 那 这 3 种 方式 你 看 完 ， 就 会 憾 然 大 悟 。 


(1) 网 页 的 utf8 编码 设置 
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要 将 网 页 设置 为 utf-8 编码 ， 我 们 需要 在 页 面 的 <head> 标 签 中 添加 <meta> 并 制定 charset 格式 
为 utf8， 代 码 如 下 : 


(2) js 文件 的 utf-8 编码 设置 
在 使 用 PhoneGap 时 ， 经 常 编写 js 代码 或 调用 js 文件 ， 这 些 调用 里 可 能 也 包括 中 文 ， 所 以 引 
入 js 文件 或 编写 js 代码 时 ， 也 要 添加 编码 设置 一 项 ， 代 码 如 下 : 


(3) 文件 保存 时 的 utf-8 编码 设置 

再 有 经 验 的 老手 ， 也 经 常 绊 倒 在 这 一 刻 。 前 面 的 所 有 设置 都 完成 了 ， 但 是 手机 真 机 测试 时 ， 
依然 显示 乱码 ? 

这 是 因为 我 们 对 于 小 的 修改 ， 一 直 习惯 使 用 记事 本 ， 而 记事 本 默认 的 保存 编码 格式 是 ANSL， 
这 样 每 次 一 修改 ， 网 页 文件 的 编码 格式 就 变 了 ,所 以 也 是 会 出 现 乱 码 ,解决 方案 就 是 在 记事 本 中 ， 
单 击 “ 文 件 | 另存 为 ”命令 ， 在 窗口 的 “编码 ”字段 处 ， 选 择 UTF-8， 如 图 9.9 所 示 。 


图 99 记事 本 另存 时 选择 编码 格式 
好 了 ， 这 3 个 地 方 设置 好 后 ， 中 文 乱码 就 彻底 解决 了 。 


9.4 4 千 


本 章 首先 介绍 了 生命 周期 的 含义 ， 接 着 介绍 了 PhoneGap 的 生命 周期 有 哪些 事件 ， 并 将 这 些 
事件 分 了 3 类 : 程序 加 载 事件 、 被 动 消息 事件 、 主 动 消息 事件 。 本 章 第 2 节 的 3 个 小 节 分 别 通过 
3 个 案例 来 帮助 读者 学 习 如 何 熟练 使 用 这 3 类 事件 。 因 为 每 个 事件 并 不 是 针对 所 有 的 移动 设备 的 ， 
而 且 每 种 移动 设备 使 用 时 都 可 能 会 略 有 差异 ， 所 以 读者 可 以 参考 以 下 这 个 网 址 ， 随 时 了 解 事件 的 
变更 和 差异 : 

‘http://docs.phonegap.com/en/4.0.0/cordova_events events.md.html#Events 
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为 了 学 习 方 便 ， 本 书 把 获取 设备 信息 、 获 取 通 讯 录 信息 和 对 用 户 的 消息 提示 ， 统 一 为 信息 处 
理 。 也 就 是 说 ， 本 章 会 包含 这 三 方面 的 内 容 。 尤 其 值得 注意 的 是 PhoneGap 的 notification 类 中 封装 
了 一 系列 设备 视觉 、 听 觉 和 触觉 的 通知 ， 可 以 为 应 用 定制 专门 的 消息 推送 、 警 告 或 提示 。 


本 章 主要 内 容 包括 : 


e 获取 移动 设备 的 基本 信息 ， 包 括 设备 号 、 版 本 号 等 
@ 操作 通讯 录 ， 包 括 通讯 录 的 创建 、 读 取 、 查 询 
e 给 出 消息 提示 ， 包 括 警告 消息 和 震动 消息 


1 0. 1 使 用 PhoneGap 获取 移动 设备 信息 


除了 能 够 将 HTML 页 面 打 包 成 可 以 直接 安装 运行 的 APP 外 ，PhoneGap 的 一 个 最 大 优势 在 于 
可 以 通过 JavaScript 调用 设备 来 访问 设备 上 的 硬件 信息 ， 从 而 实现 一 些 原本 只 有 依靠 原生 SDK 才 


能 够 达到 的 目的 。PhoneGap 使 用 device 类 获取 设备 信息 ， 下 面 就 展示 了 一 个 获取 设备 信息 的 例 
子 。 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


本 例 运行 结果 如 图 10.1 所 示 。 


设备 名 称 : iPhone6,2 

PhoneGap 版 本 : 3.6.3 

操作 系统 : iOS 

设备 编号 : 0D351086-D3F7-4C17-BE48- 


44E93A33BDA2 
操作 系统 版 本 : 8.1.1 


图 10.1 利用 PhoneGap 显示 设备 信息 


通过 本 例 可 以 看 出 ， 使 用 PhoneGap 中 API 的 方法 与 使 用 原生 JavaScript 和 HTML 的 方法 没 
有 什么 不 同 ， 只 是 多 了 一 些 事 先 定 义 好 的 类 ， 如 上 面 范例 第 11 行 中 的 device。 

PhoneGap 定义 了 一 个 类 device， 其 中 包含 了 model、cordova、platform、uuid、version 这 5 
个 成 员 变 量 , 分 别 存放 设备 的 设备 名 称 、 PhoneGap 版 本 号 、 操 作 系统 、 设 备 编号 和 操作 系统 版 本 ， 
使 用 时 可 以 直接 引用 。 

在 范例 的 第 6~16 行 就 是 使 用 了 innerHTML 操作 ， 把 device 类 中 的 信息 显示 到 页 面 元 素 中 ， 
而 页 面 元 素 是 在 第 9 行 中 利用 元 素 的 id 属性 来 获取 的 。 熟 悉 JavaScript 的 读者 可 以 发 现 ， 这 与 
JavaScript 的 DOM 操作 完全 相同 。 


TO.2 phoneGap 程序 运行 慢 的 解决 方案 


PhoneGap 之 所 以 还 不 够 流行 ， 源 于 它 的 一 个 缺点 ， 就 是 运行 速度 较 慢 ， 这 一 缺点 已 经 在 第 
10.1 节 的 例子 中 充分 地 体现 出 来 了 。 在 页 面 加 载 完毕 到 系统 获取 到 设备 信息 的 中 间 过 程 中 ， 屏 幕 
有 一 段 短暂 的 时 间 是 一 片 空白 的 ， 这 对 于 一 款 应 用 来 说 可 能 是 致命 的 。 那 么 有 没有 办 法 能 解决 这 
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一 遗憾 呢 ? 下 面 就 展示 了 一 种 非常 不 错 的 解决 方法 。 


可 以 发 现 ， 本 例 与 原 范例 相 比 ， 变 化 不 大 ， 仅 仅 是 在 第 21 行 中 加 入 了 一 句 代码 而 已 。 编 译 运 
行 后 的 感觉 却 大 大 不 一 样 了 ， 在 原本 出 现 一 片 空白 、 使 用 户 感到 略微 茫然 的 部 分 ， 如 今 变 成 了 图 
10.2 所 示 的 界面 。 


正在 加 载 设备 ， 请 等 


102 原本 该 是 一 片 空白 的 部 分 加 入 了 文字 提示 


之 后 又 经 过 了 短暂 的 时 间 ( 这 段 时 间 是 PhoneGap 用 来 实现 设备 的 加 载 以 及 获取 设备 信息 ， 
虽然 短暂 但 是 肉眼 能 够 清楚 地 感觉 到 )， 界 面 又 切换 到 了 图 10.3 所 示 的 界面 。 
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设备 名 称 : 让 hone6,2 

PhoneGap 版 本 : 3.6.3 

操作 系统 : iOS 

设备 编号 : 0D351086-D3F7-4C17-BE48- 
44E93A33BDA2 

操作 系统 版 本 : 8.1.1 


10.3 ”最终 屏幕 显示 的 结果 


| 在 PhoneGap 的 实际 开发 中 ,要 善于 利用 JavaScript 的 灵活 性 以 及 各 个 设备 加 载 的 时 间 差 来 弥 


补 PhoneGap 在 效率 上 的 先天 不 足 。 


1 0.3 实例 : 用 PhoneGap 制作 查看 设备 的 应 用 


前 面 几 节 介 绍 了 使 用 PhoneGap 获取 设备 信息 的 方法 ， 可 是 仅仅 通过 一 个 简单 的 例子 显然 是 
无 法 直接 应 用 到 真实 开发 中 的 。 因 此 本 节 安 排 一 个 复习 ， 利 用 已 经 学 过 的 知识 来 实现 一 个 查看 设 


备 信息 的 简单 应 用 。 
本 次 的 任务 非常 明确 ， 就 是 要 实现 一 个 简单 的 页 面 ， 在 屏幕 偏 下 方 的 位 置 有 一 个 按键 ， 当 用 
户 按 下 它 时 ， 将 会 在 屏幕 的 上 半 部 分 显示 出 设备 的 信息 ， 同 时 要 保证 应 用 的 流畅 性 和 美观 。 


10.3.1 APP 的 界面 设计 


由 于 这 款 应 用 的 功能 非常 单一 ， 而 且 只 有 一 个 页 面 ， 因 此 页 面 中 的 样式 利用 自 定 义 的 CSS 来 
实现 ， 这 样 既 不 会 太 麻烦 也 能 够 保证 应 用 运行 的 高 效 性 。 为 了 保证 良好 的 交互 性 ， 应 用 要 对 用 户 
的 操作 做 出 简单 的 反应 ， 如 点 击 按钮 时 按钮 会 变色 等 。 

首先 来 看 该 APP 使 用 的 基本 界面 。 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


编译 之 后 ， 运 行 结 果 如 图 10.4 所 示 。 虽 然 界面 看 上 去 比较 有 山寨 感 ， 很 难 与 美观 这 个 词 联系 
到 一 起 ， 但 是 它 已 经 具备 了 一 个 完整 的 应 用 界面 所 需要 的 各 种 要 素 。 


| 实际 开发 中 可 以 根据 经 常 出 现 的 分 辨 率 来 分 别 编写 几 组 CSS， 然 后 通过 获取 设备 屏幕 的 尺寸 
| | 来 选择 使 用 对 应 的 那 一 组 CSS。 


范例 第 23~35 行 是 按钮 的 CSS 样式 , 它 首先 使 用 了 CSS 3 中 的 圆 角 属性 , 然后 又 为 圆 角 加 入 
了 一 个 边框 ， 保 证 按钮 的 颜色 能 够 与 周围 的 背景 色 有 一 个 明显 的 区 分 ， 最 后 在 按钮 内 部 加 入 一 个 
渐变 作为 真实 的 按钮 来 使 用 。 

为 了 增强 用 户 点 击 按钮 的 交互 性 ， 在 范例 的 第 37~40 行 又 为 按钮 加 入 了 一 个 伪 类 ， 使 按钮 在 
被 用 户 点 击 后 改变 颜色 ， 这 样 用 户 能 够 清楚 地 感觉 到 应 用 做 出 了 回应 。 图 10.5 为 按钮 被 点 击 时 的 
样子 。 


茵 在 实际 开发 时 还 可 以 为 按钮 加 入 一 些 图 片 或 阴影 效果 。 


点 击 屏幕 下 万 的 按钮 ， 系 统 
将 会 自动 获取 设备 信息 。 


10.4 ”实现 后 的 应 用 界面 10.5 当 按钮 被 点 击 时 变 为 红色 


10.3.2 ”APP 的 功能 实现 


上 一 小 节 已 经 实现 了 利用 HTML 5 与 CSS 3 来 完成 应 用 的 界面 ， 本 小 节 将 为 该 界面 加 入 获取 
设备 信息 的 功能 。 许 多 读者 一 定 会 认为 本 小 节 是 在 画蛇添足 ， 因 为 他 们 会 认为 只 要 把 第 10.2 节 中 
的 代码 复制 到 界面 中 就 可 以 了 ， 实 际 上 却 并 不 是 这 样 ， 这 是 为 什么 呢 ? 我 们 先 来 添加 获取 设备 信 
息 的 代码 。 
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构建 跨 平台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


运行 之 后 ， 按 下 按钮 获取 设备 信息 后 的 结果 如 图 10.6 所 示 。 


设备 名 称 : iPhone6,2 
PhoneGap 版 本 : 3.6.3 


操作 系统 : iOS 

设备 编号 : 0D351086-D3F7- 
4C17-BE48-44E93A33BDA2 
操作 系统 版 本 : 8.1.1 


图 10.6 应 用 运行 后 的 效果 


观察 范例 的 第 33 行 ,此 处 为 按钮 加 入 了 一 个 onclick 事件 ， 当 它 被 点 击 时 会 运行 第 13 行 处 的 
get_info() 函 数 。 由 于 这 样 并 不 能 知道 系统 是 否 已 经 加 载 好 了 设备 ， 因 此 必须 在 页 面 刚刚 被 载 入 时 
加 入 一 个 标志 变量 第 4 行 )。 

在 代码 第 8 行 ， 由 于 设备 已 经 完成 了 加 载 ,因此 可 以 在 函数 中 为 标志 变量 赋值 ， 如 第 11 行 所 
示 。 这 样 ， 如 果 设 备 没有 完成 加 载 ， 点 击 按钮 就 是 无 效 的 了 。 

另外 ， 也 许 有 读者 会 问 ， 为 什么 不 需要 考虑 从 点 击 了 按钮 到 设备 信息 被 显示 出 来 的 延 时 呢 ? 
因为 实际 上 在 设备 被 加 载 完成 时 ， 设 备 信息 就 已 经 被 PhoneGap 写 入 到 了 device 类 中 ， 而 点 击 按 
钮 之 后 系统 所 做 的 仅仅 是 将 5 个 字符 串 显示 出 来 而 已 ， 几 乎 不 会 花费 时 间 ， 这 与 10.2 节 中 要 等 待 
设备 加 载 的 时 间 是 有 一 定 区 别 的 。 

在 实际 开发 中 ， 也 许 还 要 考虑 到 用 户 在 设备 加 载 完成 前 就 点 击 了 按钮 ， 长 时 间 等 待 后 不 耐烦 
的 情况 ， 这 时 就 可 以 再 加 入 一 个 新 的 函数 ， 利 用 一 个 计时 器 函数 不 断 地 读 取 标 志 变 量 的 值 ， 同 时 
在 屏幕 上 方 输出 “请 用 户 等 待 ”的 信息 。 当 读 取 到 isready 变量 值 为 1 时 ， 再 执行 将 设备 信息 显示 
出 来 的 操作 。 


三 | 在 实际 开发 尤其 是 商业 级 别 的 开发 中 ， 常 常 需要 考虑 到 一 些 非常 极端 的 情况 。 


至 此 , 一 个 简单 的 设备 信息 查看 APP 就 算是 完成 了 , 读者 如 果 有 兴趣 也 可 以 在 接 下 来 的 学 习 
中 继续 完善 ， 为 它 加 入 更 多 的 特效 或 功能 。 
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0 i 
1 .4 通讯 录 信 息 的 获取 
一 个 社区 APP 的 火爆 离 不 开 好 友 拉 好 友 这 种 形式 ， 比 如 微 信和 刚 开始 ,就 可 以 添加 通讯 录 好 友 


或 者 QQ 好 友 ， 这 样 就 形成 了 一 个 私密 圈子 ， 所 以 做 移动 APP， 获 取 通 讯 录 信息 基本 上 是 最 普通 
的 一 个 功能 了 。 本 节 将 介绍 如 何 使 用 PhoneGap 来 调用 通讯 录 。 


10.4.1 创建 一 个 联系 人 


本 节 学 习 使 用 PhoneGap 操作 手机 通讯 录 。PhoneGap 把 有 关 通 讯 录 的 信息 封装 在 一 个 Contact 
类 中 ， 创 建 一 个 新 的 联系 人 要 用 contacts.create 方法 。 
下 面 的 代码 用 来 创建 一 个 新 的 联系 人 ， 联 系 人 姓名 为 “ 王 小 二 ”， 性 别 为 女 : 


运行 之 后 效果 如 图 10.7 所 示 ， 对 话 框 中 显示 了 刚刚 创建 的 联系 人 的 信息 。 


Mr 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


http://192.168.1.104 
联系 人 : 王 小 二 , 性 别 : 女 


oOK 


图 10.7 显示 创建 出 的 新 联系 人 


在 PhoneGap 中 ， 使 用 类 Contact 来 管理 通讯 录 ， 每 次 要 对 通讯 录 进 行 操作 前 ， 首 先 要 使 用 语 
名 var contact = navigator.contacts.create(properties) 来 实例 化 一 个 Contact 对 象 ， 如 范例 中 第 9 行 所 
示 。 


入 元 | 在 PhoneGap 官方 给 出 的 说 明 中 使 用 了 var contact= navigator.service.contacts.create(properties) ， ] 
pi 但 是 该 语句 仅 在 1.0 版 本 的 PhoneGap 中 有 效 , 在 之 后 的 版 本 中 去 掉 了 service， 因 此 如 果 照 抄 


官方 demo 在 运行 时 很 可 能 出 错 。 


范例 第 11 行 还 设置 了 Contact 对 象 的 gender 属性 为 “ 女 ” 在 本 例 中 并 没有 实际 的 意义 〈 因 
为 还 没有 保存 联系 人 ， 在 通讯 录 中 看 不 到 此 人 )， 只 是 为 了 展示 对 Contact 对 象 进行 操作 的 方法 。 
结合 图 10.7 中 的 内 容 ， 再 经 过 这 番 操 作 之 后 ， 我 们 基本 上 就 了 解 了 Contact 对 象 的 属性 。 


10.4.2 ”查找 通讯 录 


上 一 小 节 通 过 Contact 中 的 create() 方 法 创建 了 一 个 新 的 联系 人 ， 本 小 节 将 介绍 Contact 对 象 
中 的 另 一 个 方法 fnd0。 它 用 来 查询 通讯 录 中 的 数据 ， 并 返回 一 个 或 多 个 包含 指定 字段 的 Contact 
对 象 ( 即 一 个 类 型 为 Contact 的 数组 ， 包 含 联系 人 的 相信 信息 )。 下 面 就 是 一 个 使 用 find() 方 法 查 
询 通讯 录 的 例子 。 
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运行 之 后 ， 点 击 屏幕 上 的 “PhoneGap 中 的 联系 人 ” 几 个 字 得 到 如 图 10.8 所 示 的 界面 。 


在 运行 之 前 一 定 要 保证 通讯 录 中 有 联系 人 ， 和 否则 无 法 得 到 相应 的 结果 。 还 有 对 于 苹果 设备 来 


说 ， 要 允许 PhoneGap 访问 通讯 录 。 


范例 第 22~30 行使 用 find() 方 法 来 查找 资料 中 包含 了 “ 王 ” 的 联系 人 ， 在 使 用 该 方法 之 前 必 
须要 创建 两 个 参数 options (第 25 行 ) 和 fields (第 27 行 )。options 参数 中 包含 了 要 查询 的 内 容 ， 
比如 本 例 中 options.filter 的 值 为 “ 王 ” fields 参数 则 是 定义 此 次 查找 的 目标 字段 ， 即 displayName 


和 name。 
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http://192.168.1.104 
联系 人 是 : 王志华 
OK 


10.8 查询 含有 “ 王 ” 的 联系 人 的 结果 


下 按照 西方 的 命名 习惯 联系 人 的 姓 和 名 是 分 开 的 ， 而 displayName 字段 就 可 以 看 做 是 姓 和 名 
一 的 组 合体 。 


除了 这 两 个 参数 ， 使 用 find0 方 法 时 还 要 在 其 中 另外 定义 两 个 参数 ， 其 中 onSuccess 用 来 执行 
查询 操作 。 在 执行 find0 方 法 之 后 ， 符 合 条 件 的 Contact 信息 将 会 存放 在 一 个 数组 中 ， 可 以 在 
onSuccess 函数 中 对 它们 进行 处 理 。onError 函数 则 是 用 来 指定 find0 方 法 出 错时 的 提示 。 

此 外 还 要 知道 ， 第 28 行 查找 联系 人 的 API 使 用 了 多 个 参数 ， 其 中 分 别 使 用 了 onSuccess 和 
onError 函数 ,来 对 API 调用 成 功 和 失败 的 情况 进行 处 理 ,而 不 是 直接 定义 API 的 返回 值 . PhoneGap 
提供 的 API 中 大 多 使 用 了 这 样 的 方法 。 

不 管 我 们 的 通讯 录 中 ， 包 含 “ 王 ”的 联系 人 有 多 少 个 ， 通 过 测试 可 以 发 现 ， 每 次 只 能 返回 一 
个 联系 人 ， 这 个 时 候 ， 我 们 需要 为 options 添加 允许 返回 多 行 的 属性 ， 如 以 下 代码 : 


关于 获取 名 字 的 方式 ， 因 为 中 西方 差异 ， 实 在 有 些 混乱 ， 本 例 使 用 contacts[i].name.formatted 
获取 了 一 个 完整 的 名 字 ， 如 果 只 获取 姓 或 只 获取 名 ， 可 以 用 以 下 方式 来 测试 一 下 : 


10.4.3 ”联系 人 包括 哪些 属性 


在 之 前 的 内 容 中 曾经 多 次 用 到 Contact 对 象 ， 也 学 习 了 Contact 的 两 个 方法 create0 和 find0)， 
但 是 作为 一 个 类 ，Contact 又 有 哪些 属性 呢 ? 这 将 是 本 小 节 要 介绍 的 主要 内 容 。 

打开 手机 的 通讯 录 ， 新 建 一 个 联系 人 会 打开 如 图 10.9 所 示 的 界面 (此 界面 以 iPhone 作为 测 
试 手机 )。 可 以 看 到 每 一 个 联系 人 都 包括 了 姓 、 名 、 电 话 、 住 址 、 邮 箱 等 内 容 ， 而 这 些 内 容 就 是 存 
储 在 类 Contact 中 的 信息 。 表 10.1 中 记录 了 Contact 各 个 属性 的 名 称 和 意义 。 
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表 10.1 Contact 中 的 属性 


属性 名 称 类 型 介绍 

id String 作为 联系 人 的 唯一 标识 符 
displayname String 联系 人 最 终 显示 的 名 称 
name 联系 人 的 姓名 


Strint 
nickmame [sw | me 
phonenumben 联系 人 的 电话 


emails Contactfield 型 数组 保存 了 联系 人 的 电子 邮箱 
addresses ContctAddrsses 型 数组 保存 了 联系 人 的 全 部 住址 
ims Contactfield 型 数组 保存 了 联系 人 的 全 部 IM 地 址 


i 保存 了 联系 人 的 所 在 单位 、 组 织 等 信息 
birhday [| 

| sting | 对 联系 人 的 各 忘 、 注 释 等 信息 

photos 保存 了 联系 人 的 全 部 头像 信息 
categories 保存 了 用 户 对 联系 人 添加 的 自 定义 信息 
wls 联系 人 的 主页 等 信息 


二 通过 这 些 属性 就 可 以 简单 地 对 联系 人 的 信息 进行 查看 、 修 改 、 删 除 等 操作 。 


站 


ing 


全 添加 电话 


人 添加 电子 邮件 


电话 铃声 。 默认 


振动 默认 


图 109 新 建 一 个 联系 人 
下 面 的 例子 将 使 用 本 小 节 介绍 过 的 属性 ， 新 建 一 个 联系 人 信息 并 保存 。 


01 <script src="cordova.js" type="text/javascript" charset="utf-8"></script> 
02 <script type="text/javascript" charset="utf-8"> 
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编译 运行 之 后 ， 点 击 屏幕 上 的 “新 建 一 个 联系 人 ”， 可 以 弹出 一 个 对 话 框 ， 内 容 为 “新 建 联 
系 人 成 功 ”， 如 图 10.10 所 示 。 之 后 查看 手机 的 通讯 录 可 以 看 到 ， 确 实在 通讯 录 中 增加 了 一 个 新 
的 联系 人 “ 张 三 宝 ”， 如 图 10.11 所 示 。 
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eecco 中 国 移动 全 他 64% 本 了 


[yi 所 有 联系 人 + 
也 

he : 

em : 

am 

机 : 
ee 张 三 宝 " 
mF 3 

和 ; 

wa : 

Bn 

2 
图 10.10 ”提示 新 建 联系 人 成 功 图 10.11 新 建立 的 联系 人 “ 张 三 宝 ” 


本 范例 要 特别 注意 的 是 ， 在 第 16~19 行 对 name 属性 的 保存 ， 必 须 新 建 一 个 ContactName 对 
象 。 此 外 建议 在 创建 displayname 和 nickname 属性 时 ， 尽 量 使 它们 一 致 ， 因 为 在 某 些 系统 中 这 两 
个 属性 是 混用 的 ， 只 有 这 样 才能 保证 应 用 的 兼容 性 。 第 24 行使 用 了 save0 方 法 来 保存 刚刚 创建 的 
Contact 对 象 ， 使 它 被 记录 到 手机 中 。 


记 晴 册 ”该 者 可 以 自行 尝试 在 只 保存 了 name 属性 或 只 保存 了 displayname 时 ， 系 统 通讯 孙 中 显示 的 名 | 


六 称 有 什么 区 别 ， 从 而 理解 手机 通讯 录 中 对 联系 人 名 称 的 保存 机 制 ， 这 对 真正 开发 一 款 好 用 的 


通讯 录 应 用 很 有 帮助 。 对 于 苹果 系统 的 通讯 录 ， 人 familyName 是 姓 ，givenName 是 名 。 


10.4.4 ”联系 人 的 各 种 编辑 操作 


上 一 小 节 利 用 Contact 对 象 创建 了 一 个 新 的 联系 人 ，Contact 除了 可 以 创建 一 个 联系 人 之 外 ， 
还 可 以 实现 对 联系 人 的 修改 、 删 除 和 复制 等 操作 。 本 小 节 将 以 一 个 例子 来 实现 新 建 、 复 制 和 删除 
这 些 操作 。 
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第 10 章 PhoneGap 对 信息 的 处 理 


我 们 先 对 代码 做 一 些 简单 的 分 析 。 

首先 要 做 的 依然 是 等 待 设备 加 载 完毕 ， 如 上 面 代 码 第 4 行 所 示 。 当 设备 加 载 完毕 之 后 ， 系 统 
会 自动 执行 自 定义 函数 onDeviceReady。 此 处 由 于 确定 设备 已 经 被 完全 加 载 了 ， 就 可 以 开始 创建 
联系 人 了 。 本 例 首先 创建 了 两 个 联系 人 ， 其 中 一 个 的 各 项 资料 都 是 与 狗 有 关 的 ， 如 第 9~17 行 所 

此 时 只 是 创建 了 一 个 Contact 对 象 ， 并 不 是 真正 地 将 数据 写 入 到 通讯 录 中 。 因 此 需要 在 第 19 
行使 用 save() 方 法 将 数据 写 入 到 通讯 录 中 。 

接 下 来 又 新 建 了 一 个 联系 人 ， 而 这 个 联系 人 都 是 与 猫 有 关 的 ， 如 范例 第 21~31 行 所 示 。 将 新 
创建 的 联系 人 保存 为 contact2， 然 后 写 入 到 通讯 录 中 。 这 两 个 联系 人 保存 完毕 之 后 ， 都 会 在 回调 
函数 onSaveSuccess 中 弹出 对 话 框 来 提示 联系 人 保存 成 功 。 

第 33 行使 用 clone() 方 法 来 对 contactl (也 就 是 那个 各 项 资料 都 与 狗 有 关 的 联系 人 ) 进行 了 一 
次 复制 ,将 它 的 所 有 信息 都 保存 到 了 名 为 clone 的 联系 人 对 象 中 , 然后 通过 remove() 方 法 对 contactl 
进行 删除 。 

这 样 一 来 实际 上 最 终 通讯 录 中 只 剩 下 那 位 各 种 资料 都 与 猫 有 关 的 联系 人 了 ， 读 者 可 以 自行 测 
试 一 下 是 不 是 这 样 的 ， 因 为 通讯 录 涉 及 很 多 个 人 电话 ， 这 里 就 不 再 给 出 图 示 了 。 


10.4.5 ”复杂 的 联系 人 属性 ContactField 


在 学 习 Contact 对 象 的 属性 时 , 有 不 止 一 个 属性 是 ContactField 类 型 的 变量 , 那么 ContactField 
类 究竟 是 什么 呢 ? 本 小 节 将 对 它 进行 一 个 比较 深入 的 剖析 。 

ContactField 对 象 是 一 个 可 重用 的 组 件 , 用 于 支持 通用 方式 下 的 联系 人 字段 , 每 个 ContactField 
对 象 中 都 包含 了 一 个 值 属 性 (value)、 一 个 类 型 属性 (type) 和 一 个 首选 项 属性 (pref)。 其 中 type 
属性 是 一 个 字符 串 ， 用 来 对 该 对 象 的 类 型 进行 说 明 ， 比 如 说 它 的 值 可 以 为 “这 是 一 个 电子 邮件 ” 
value 属性 用 来 存放 具体 的 值 ， 依 然 以 邮件 为 例 ， 它 的 值 就 可 以 是 123456@sina.com。pref 是 一 个 
布尔 型 变量 ， 它 包含 了 当前 用 户 的 首选 项 ， 默 认为 true。 

在 大 多 数 情况 下 ，ContactField 对 象 中 的 type 属性 并 不 会 是 事先 确定 值 。 例 如 ， 一 个 电话 号 
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码 的 type 属性 值 可 以 是 : home、work、mobile、iPhone， 或 其 他 相应 特定 设备 平台 的 联系 人 数据 
库 所 支持 的 值 。 然 而 ， 对 于 Contact 对 象 的 photos 字段 ，PhoneGap 使 用 type 字段 来 表示 返回 的 图 
像 格式 。 如 果 value 属性 包含 的 是 一 个 指向 照片 图 像 的 URL，PhoneGap 对 于 type 会 返回 ul。 如 
果 value 属性 包含 的 是 图 像 的 Base64 编码 字符 串 ，PhoneGap 对 于 type 会 返回 base64。 

下 面 演示 一 个 使 用 ContactField 对 象 的 例子 : 


第 10 章 “PhoneGap 对 信息 的 处 理 


在 Contact 对 象 中 ， 电 话 号 码 (phoneNumbers) 就 是 一 个 ContactField 类 的 数组 对 象 ， 范 例 第 
10 行将 电话 号 码 声 明成 了 一 个 数组 。 在 第 11~13 行为 数组 中 的 对 象 赋值 ， 然 后 在 第 31~33 行 通过 
alert() 函 数 将 它们 显示 出 来 。 运 行 结果 如 图 10.12 所 示 。 


http://192.168.1.104 
美 型 : work 


图 10.12 显示 电话 号 码 的 各 个 属性 值 


可 以 看 到 ， 被 消息 框 弹出 的 内 容 与 最 初 在 程序 中 输入 的 内 容 是 对 应 的 ， 使 用 这 样 的 方法 能 够 
保证 在 安 卓 自 带 通讯 录 中 ， 项 目 不 足 时 为 用 户 提供 额外 的 数据 保存 选项 。 如 果 刘 备 穿越 过 来 想 用 
手机 的 话 ， 可 能 就 会 在 存储 他 手下 战 将 的 电话 时 加 入 一 些 其 他 的 字段 ， 比 如 记 住 关羽 、 字 云 长 之 
类 的 内 容 。 
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某 些 系统 中 不 支持 ContactField 类 型 的 首选 项 属性 ， 因 此 该 值 在 安 卓 、 黑 莓 以 及 iOS 设备 下 
永远 为 false。 


10.5 PhoneGap 的 消息 提示 


不 管 是 做 网 页 测试 还 是 移动 测试 ， 我 们 经 常 需要 给 出 一 些 提 示 信 息 ， 让 用 户 知道 是 创建 完成 
了 还 是 创建 失败 了 ? 这 种 提示 工作 我 们 多 用 alert() 来 实现 ， 本 节 来 看 一 种 新 的 实现 方式 。 


10.5.1 _notification 警告 的 使 用 


notification.alert() 方 法 可 以 使 设备 弹出 一 个 可 以 自 定义 的 对 话 框 ， 之 前 这 样 的 功能 主要 依靠 
JavaScript 中 的 alert() 方 法 来 实现 。 与 alert() 方 法 相 比 ， 显 然 notification.alert0) 具 有 更 加 强大 的 可 定 
制 性 与 易 用 性 ， 下 面 是 它 的 一 个 例子 。 
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运行 结果 分 别 如 图 10.13 和 图 10.14 所 示 。 


http://192.168.1.104 
设备 加 载 完毕 


OK 


图 10.13 ”使 用 alert() 方 法 显示 对 话 杠 


可 以 看 到 ， 使 用 两 种 方法 显示 出 的 对 话 框 在 样式 上 是 一 样 的 ， 但 是 使 用 notification 类 产生 的 
对 话 框 具有 更 强大 的 自由 度 ， 比 如 可 以 自 定义 对 话 框 的 标题 、 按 钮 等 的 内 容 。 除 此 之 外 ， 观 察 范 
例 第 15~22 行 ， 很 明显 notification 中 的 alert0 方 法 还 具有 方便 调用 的 回调 函数 ， 这 也 是 它 要 比 原 
生 JavaScript 中 的 alert() 方 法 更 加 方便 的 原因 之 一 。 

范例 第 15~22 行 就 是 notification.alert() 方 法 的 使 用 , 它 有 4 个 参数 ， 分 别 是 对 话 框 的 内 容 、 回 
调 函数 、 对 话 框 的 标题 和 对 话 框 按 钮 的 标题 ， 后 两 个 参数 可 选 。 其 中 有 一 个 需要 理解 的 地 方 是 回 
调 函 数 的 使 用 场合 。 通 过 实验 可 以 知道 ， 当 对 话 框 被 弹出 时 ， 不 一 定 要 点 击 对 话 框 中 的 按钮 ， 点 
击 屏幕 四 周 的 空白 区 域 一 样 可 以 让 对 话 框 消失 ， 这 时 就 会 调用 回调 函数 〈 在 范例 中 第 11~13 行 定 
义 )， 效 果 如 图 10.15 所 示 。 


以 上 测试 在 安 卓 设 备 下 通过 , 在 iOS 设备 下 还 必须 单 击 对 话 框 中 的 按钮 ， 此 对 话 框 才 会 消失 。 
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这 是 一 这 是 一 个 标 
这 是 使 用 notification alert0 方 法 显示 敬告 这 是 使 用 notification_alert0 方 法 显示 营 告 


我 就 不 说 这 个 按钮 是 可 以 自 定义 的 我 就 不 说 这 个 按钮 是 可 以 自 定义 的 


图 10.14 使 用 notification 显示 一 个 自 定义 的 对 话 框 图 10.15 屏幕 四 周 的 空白 区 域 ， 点 击 使 对 话 框 消失 


[在 和 多数 于 台中，notificationalen0 与 alent0 方 法 将 会 显示 为 与 原生 SDK 相同 的 对 话 框 样式 ，] 
| 但 是 在 少数 低 版 本 平台 中 ， 如 塞 班 ， 则 会 显示 成 浏览 器 中 对 话 框 的 样式 。 如 在 图 10.13 中 使 


用 alert0 方 法 所 显示 出 的 对 话 框 就 是 浏览 器 中 默认 的 对 话 框 样 式 , 可 以 看 出 它 与 图 10.14 中 的 
对 话 框 有 明显 的 区 别 。 在 比较 新 的 版 本 中 ， 无 论 采 用 哪 种 方式 显示 出 的 对 话 框 都 是 一 样 的 。 | 


10.5.2 ”确认 对 话 框 的 使 用 


除了 alert0 之 外 ，notification 类 还 提供 了 confirm() 对 话 框 ， 使 用 方法 与 notification.alert0 非 常 
类 似 ， 下 面 是 使 用 它 弹 出 对 话 框 的 一 个 例子 。 
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运行 之 后 ， 点 击 屏 幕 上 方 的 “显示 对 话 框 ” 字 样 弹出 对 话 框 ， 如 图 10.16 所 示 。 当 点 击 对 话 
框 中 的 按钮 后 ， 运 行 回 调 函数 onConfim0， 弹 出 一 个 新 的 对 话 框 如 图 10.17 所 示 。 


这 是 一 个 标题 http://192.168.1.104 
eee 党 点 击 按钮 后 运行 回调 函数 


这 个 按钮 也 是 可 以 自 定义 的 CE 


10.16 ”弹出 确认 对 话 框 10.17 触发 回调 函数 弹出 新 的 对 话 框 


范例 第 17~22 行 是 PhoneGap 中 使 用 confimm() 方 法 的 一 个 例子 ,该 方法 仍然 使 用 了 回调 函数 ， 
但 是 值得 注意 的 是 ， 在 confirm0) 方 法 中 ， 当 用 户 点 击 了 对 话 框 中 的 按钮 后 才 执 行 回调 函数 ， 这 与 
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上 一 节 中 的 alert0 方 法 有 所 区 别 。 

这 种 方法 的 使 用 非常 有 意义 ， 因 为 在 PhoneGap 中 默认 的 对 话 框 只 能 起 到 提醒 的 作用 ， 但 是 
无 论 用 户 确认 与 否 ， 系 统 都 会 默认 按照 原 定 的 计划 执行 。 这 很 有 一 种 先 斩 后 奏 和 味道 ， 很 有 可 能 
会 引起 某 些 用 户 的 反感 ， 如 果 使 用 了 这 种 具有 确定 功能 的 对 话 框 ， 则 可 以 避免 这 种 现象 的 发 生 。 


10.5.3 ”显示 可 以 传递 参数 的 对 话 框 


经 过 前 面 两 节 的 学 习 已 经 了 解 了 在 PhoneGap 中 使 用 对 话 框 的 方法 ， 不 过 显然 它们 还 不 能 够 
满足 实际 开发 中 对 于 对 话 框 的 要 求 。 比 如 ， 经 常 需要 通过 对 话 框 来 传递 一 些 数值 ， 或 表示 用 户 是 
确定 还 是 取消 的 选择 结果 ， 这 时 就 需要 一 种 更 加 强大 的 对 话 框 。 这 样 的 需求 可 以 依靠 notification 
类 中 的 prompt( 方 法 来 实现 。 下 面 通过 一 个 例子 来 了 解 prompt0 方 法 的 使 用 。 
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本 例 运行 结果 如 图 10.18 所 示 ， 在 编辑 框 中 输入 数字 9 并 选择 “要 ”之 后 ， 得 到 如 图 10.19 
所 示 的 界面 ， 显 示 用 户 需 要 9 杯 咖啡 ， 显 然 用 户 的 选择 确实 通过 对 话 框 传递 给 了 应 用 。 


将 想 要 的 数量 输入 在 对 话 框 内 
请 问 你 需要 喝 杯 咖 啡 么 ? 


中 


http://192.168.1.104 
你 要 了 9 杯 咖 啡 


OK 


i 


[1|2[s|a[slel7z|[s|slo 


[ -Lv el 
于 .| .| .| .和 
国 图" EB 
图 10.18 输入 数字 使 系统 知道 用 户 的 需求 图 10.19 用 户 输入 的 数字 会 通过 对 话 框 传递 给 系统 


范例 第 20~25 行 是 使 用 notification.prompt() 方 法 的 一 个 例子 ， 与 之 前 学 过 的 两 种 对 话 框 非常 
相似 ， 但 是 它 的 第 4 个 参数 〈 也 就 是 第 24 行 ) 又 与 之 前 有 一 些 区 别 。 在 prompt() 方 法 的 第 4 个 参 
数 中 ， 用 方 括号 括 起 对 话 框 按钮 的 多 个 标题 ， 并 用 逗号 分 开 。 


虽然 在 prompt() 方 法 中 可 以 支持 使 对 话 框 超过 3 个 按钮 选项 ， 但 是 当 标题 超过 3 个 时 就 只 会 
显示 前 3 个 标题 。 


范例 第 11 行 定义 了 回调 函数 onPrompt()， 其 中 result 类 封装 了 对 话 框 中 提交 的 值 ， 
results.buttonIndex 中 存储 的 是 对 话 框 中 各 个 按键 的 索引 ,results.inputl 中 存放 了 用 户 在 编辑 框 中 输 
入 的 文本 。 

本 节 介绍 的 对 话 框 功能 看 似 非 常 实 用 ， 但 是 由 于 弹出 对 话 框 的 样式 过 于 死板 ， 比 如 ， 仅 能 支 
持 一 个 输入 栏 ， 而 不 能 采用 更 加 适合 用 户 使 用 的 下 拉 列 表 等 形式 ， 因 此 ， 在 实际 开发 中 常常 使 用 
精心 制作 的 jQuery 插件 来 实现 类 似 的 需求 。 


PromptO 方 法 目前 只 支持 Android 和 iOS 系统 。 ] 
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10.5.4 “控制 蜂 鸣 器 和 震动 


前 面 已 经 介绍 了 3 种 使 用 notification 类 创建 和 使 用 对 话 框 的 方法 ， 除 了 利用 对 话 框 从 视觉 上 
对 用 户 进行 提示 之 外 ,还 可 以 依靠 beep0 方 法 和 vibrate() 方 法 操纵 设备 发 出 蜂 鸣 声 和 震动 。 下 面 是 
使 用 这 两 种 方法 的 一 个 例子 。 


第 10 章 PhoneGap 对 信息 的 处 理 


运行 后 分 别 点 击 “ 显 示 对 话 框 ”、“ 蜂 鸣 器 发 声 ”、“ 使 设备 震动 ”可 以 分 别 弹出 对 话 框 、 
使 蜂 鸣 器 发 出 3 次 声音 、 使 设备 震动 2 秒 。 

第 20 行 是 PhoneGap 中 利用 notification.beep() 方 法 调用 蜂 鸣 器 的 例子 ， 其 中 的 参数 代表 了 峰 
鸣 器 发 出 声音 的 次 数 ， 第 24 行 利 用 notification.vibrate() 方 法 使 设备 震动 ， 其 中 的 参数 是 使 设备 连 
续 震 动 的 时 间 ， 单 位 为 毫秒 。 

至 此 notification 类 中 的 各 种 方法 就 介绍 完了 ， 但 这 仅仅 是 开始 ， 最 重要 的 还 是 理解 它们 之 间 
的 优 劣 关系 ， 以 便 能 够 在 合适 的 地 方 使 用 合适 的 方法 来 实现 完美 的 用 户 体验 。 

首先 将 各 种 对 话 框 归 为 一 类 ， 由 于 当 对 话 框 被 弹出 时 ， 应 用 被 暂时 置 为 不 可 用 ， 会 对 用 户 的 
使 用 造成 一 定 的 打 断 效果 ， 且 用 户 不 得 不 对 该 提示 做 出 回应 ， 因 此 对 话 框 一 般 用 于 一 些 重要 信息 
的 提示 场合 。 比 如 ， 游 戏 中 可 以 在 系统 电量 较 低 时 ， 使 用 对 话 框 来 提醒 用 户 及 时 充电 ， 或 者 在 用 
户 要 退出 应 用 时 来 向 用 户 确认 是 否 为 误 操作 。 另 外 ， 在 用 户 执行 一 些 会 影响 到 系统 的 操作 《〈 比 如 
删除 文件 、 删 除 联系 人 等 ) 时 ， 也 需要 弹出 对 话 框 来 向 用 户 确认 。 

由 于 蜂 鸣 器 和 震动 可 以 被 用 户主 动 忽略 ， 因 此 主要 用 来 增强 应 用 的 交互 性 ， 比 如 ， 一 款 新 闻 
浏览 应 用 可 以 在 有 新 闻 时 ， 利 用 蜂 鸣 器 来 提醒 用 户 。 而 一 些小 游戏 也 可 以 利用 震动 来 增强 用 户 的 
游戏 体验 ， 比 如 ， 当 用 户 操纵 的 人 物 死亡 时 设备 震动 表示 处 罚 。 蜂 鸣 器 和 震动 也 可 以 与 对 话 框 搭 
配 使 用 。 

蜂 鸣 器 与 震动 之 间 也 有 一 定 的 区 别 ， 蜂 鸣 器 的 声音 过 于 单调 ， 因 此 在 许多 环境 下 难以 适应 用 
户 体验 的 需求 ， 比 如 用 户 点 击 屏幕 时 ， 可 以 采用 一 个 几 毫 秒 的 震动 来 作为 回馈 ， 但 是 如 果 利 用 蜂 
鸣 器 来 作为 反馈 就 会 让 用 户 感到 心烦 。 因 此 在 实际 开发 中 一 定 要 慎重 选择 。 


10.6 4 千 


本 章 首先 学 习 了 利用 PhoneGap 来 获取 设备 信息 的 方法 , 读者 可 以 看 出 PhoneGap 中 的 操作 几 
平 是 完全 按照 原生 JavaScript 的 语法 来 进行 的 ， 这 是 它 的 一 个 巨大 的 优势 。 然 后 学 习 了 利用 
PhoneGap 对 设备 的 联系 人 信息 进行 修改 和 查看 的 方法 。 最 后 学 习 了 利用 notification 类 中 的 各 种 方 
法 来 实现 对 用 户 的 各 种 反馈 ， 其 中 包括 了 对 话 框 、 蜂 鸣 器 和 震动 。 这 些 方法 对 提升 一 款 应 用 的 交 
互 性 起 到 非常 重要 的 作用 。 除 此 之 外 , 这 些 反馈 的 方法 还 可 以 使 开发 者 更 好 地 实现 对 应 用 的 调试 ， 
比如 可 以 利用 prompt0 来 中 断 程序 并 修改 某 个 变量 的 值 ， 这 些 都 极 大 地 方便 了 PhoneGap 开发 人 


已 


员 。 
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本 章 将 介绍 PhoneGap 中 使 用 加 速度 传感器 、 地 理 位 置 、 指 南 针 获取 数据 的 方法 。 加 速度 传 
感 器 是 一 种 用 来 检测 物体 相对 运动 方向 以 及 沿 着 x、y、z 3 个 方向 运动 的 部 件 , 现代 的 智能 手机 绝 
大 多 数 都 集成 了 加 速度 传感器 。PhoneGap 提供 了 accelerometer 类 用 来 接收 来 自 加 速度 传感器 的 数 
据 。 地 理 位 置 和 指南 针 分 别 用 来 获取 设备 的 地 理 信息 和 方向 。 为 了 方便 开发 者 调用 ，PhoneGap 封 
装 了 用 来 访问 GPS 信息 的 Geolocation 类 来 获取 设备 地 址 位 置信 息 ， 访 问 指南 针 是 Compass 类 。 


本 章 主 要 内 容 包 括 : 

了 解 加 速度 传感器 的 功能 
获取 加 速度 数据 

了 解 Geolocation 类 的 应 用 范围 
熟练 使 用 Compass 类 


认识 加 速度 传感器 


在 刚 开始 推出 安 卓 手机 的 时 候 ， 最 新 鲜 的 小 游戏 就 是 一 个 测试 速度 传感器 的 小 球 ， 我 们 通过 
摇摆 手机 来 让 小 球 进入 指定 的 洞口 ， 这 个 游戏 就 利用 了 加 速度 传感器 。 


11.1.1 获取 当前 的 加 速度 


在 PhoneGap 中 ，accelerometer 类 封装 了 专门 用 来 获取 设备 加 速度 的 方法 ， 其 中 最 基础 的 一 

个 方法 就 是 getCurrentAcceleration()。accelerometer.getCurrentAcceleration() 的 作用 是 获得 设备 当前 
〈 即 该 方法 被 调用 时 ) 的 相对 运动 方向 ， 下 面 的 代码 展示 了 该 方法 的 使 用 。 

01 <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 


02 <script type="text/javascript" charset="utf-8"> 


03 // 等 待 加 载 PhoneGap 
04 document .addEventListener ("deviceready"，onDeviceReady，false) 


05 // PhoneGap 加 载 完毕 
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运行 代码 后 ， 点 击 屏幕 上 的 “获取 设备 运动 信息 ”字样 ， 可 以 弹出 如 图 11.1 所 示 的 对 话 框 ， 
分 别 显示 设备 在 x、y、z3 个 方向 上 的 加 速度 以 及 测试 加 速度 的 时 间 戳 。 


Timestamp: 1424195019158.114 


11.1 显示 当前 设备 的 加 速度 信息 
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隐 元 许多 虚拟 机 不 支持 加 速度 传感器 ,因此 会 弹出 显示 onEmror 的 对 话 框 , 因此 需要 在 真 机 上 进 
调试 。 如 图 11.2 就 是 笔者 在 虚拟 机 上 运行 的 结果 。 


Alert 


onError! 


NU 112 在 虚拟 机 中 获取 失败 弹出 错误 信息 J 


范例 第 12 行 是 系统 使 用 accelerometer.getCurrentAcceleration() 方 法 获取 设备 的 当前 运动 信息 ， 
它 有 两 个 参数 ， 分 别 是 两 个 自 定义 函数 的 函数 名 。 第 一 个 函数 在 获取 信息 成 功 后 被 调用 ， 同 时 还 
会 接收 到 一 个 acceleration 对 象 ， 此 对 象 中 封装 了 与 加 速度 有 关 的 信息 ,包括 设备 在 各 个 方向 上 的 
加 速度 以 及 当前 的 时 间 戳 第 二 个 函数 在 获取 设备 信息 失败 时 被 调用 , 比如 第 21~24 行 的 onError0 
函数 就 用 来 反馈 获取 设备 加 速度 信息 失败 的 消息 。 


11.1.2 ”监视 设备 的 加 速度 


上 一 小 节 学 习 了 利用 getCurrentAcceleration0 方 法 获取 设备 当前 加 速度 的 方法 。 也许 有 读者 已 
经 想到 了 它 的 一 些 作 用 ， 比 如 ， 可 以 用 来 记录 用 户 每 天 的 运动 量 ， 但 这 就 遇 到 了 一 个 问题 ， 如 果 
要 记录 用 户 每 天 的 运动 量 就 需要 不 断 地 调用 getCurrentAcceleration() 方 法 来 进行 计算 , 虽然 可 行 但 
这 无 疑 十 分 麻烦 。 有 没有 更 好 的 方法 呢 ? 

PhoneGap 作为 一 款 比 较 完善 的 跨 平 台 开 发 框架 自然 有 这 方面 的 考虑 , 封装 在 类 accelerometer 
中 的 watchAcceleration() 比 利用 JavaScript 不 断 去 调用 getCurrentAcceleration() 要 方便 得 多 。 下 面 是 
使 用 watchAcceleration() 方 法 监视 手机 加 速度 变化 的 一 个 例子 。 


01 <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
02 <script type="text/javascript" charset="utf-8"> 


03 // 等 待 加 载 PhoneGap 

04 document .addEventListener ("deviceready", onDeviceReady, false); 
05 // PhoneGap 加 载 完毕 

06 function onDeviceReady() { 

07 // 使 用 alert () 方法 显示 一 个 提示 

08 alert ("设备 加 载 完毕 ") ; 
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运行 代码 之 后 ， 点 击 屏幕 上 的 “获取 设备 运动 信息 ”字样 ， 然 后 用 手 不 断 地 晃动 手机 使 之 发 
生 位 移 ， 可 以 看 到 屏幕 上 的 数据 不 断 变化 。 获 取 一 些 加 速度 信息 后 ， 再 点 击 “ 停 止 获取 设备 运动 
信息 ”的 字样 ， 屏 幕 中 的 数据 将 不 再 变化 。 运 行 后 结果 如 图 11.3 所 示 。 


获取 设备 运动 信息 
停止 获取 设备 运动 信息 


X: -0.70174072265625y: 
4.913981323242187z: 
8.540340270996094Time: 
1424195544239.633x: 
-0.7203021240234375y: 
4.854854278564454z: 
8.511600036621093Time: 
1424195544537.38x: -0.6741979980468751y: 
4.839436340332031z: 
8.377628631591797Time: 
1424195544835.191x: 
-0.9023236083984375y: 
4.654720458984375z: 
8.384214935302735Time: 
1424195545162.454x: -0.808319091796875y: 
4.37525161743164z: 
8.499774627685547Time: 
1424195545459.967x: -1.265169067382813y: 
4.518354034423829z: 
8.561596069335938Time: 
1424195545757.013x: -1.265318756103516y: 
4.66594711303711z: 8.34709213256836Time: 
1424195546064.213x: -1.016835479736328y: 
4.371659088134765z: 


图 11.3 监视 设备 的 加 速度 变化 


雷 本 节 重 点 讲解 相关 基础 知识 ， 不 涉及 ( 撤 开 ) CSS 样式 问题 ， 请 读者 忽视 界面 的 问题 。 | 
kt 


阅读 范例 中 的 代码 ,第 11~15 行 声明 了 一 个 函数 startWatch(), 第 14 行 使 用 了 watchAcceleration() 
方法 来 监视 设备 的 加 速度 变化 情况 。 观 察 该 函数 可 以 发 现 ， 除 了 onSuccess 和 onError 之 外 ， 它 比 
getCurrentAcceleration() 方 法 还 多 了 一 个 参数 option， 该 参数 用 来 设置 每 次 监控 设备 加 速度 信息 的 
时 间 间 隔 ， 以 毫秒 为 单位 ， 本 例 中 就 设置 为 每 0.3 秒 获取 一 次 加 速度 信息 〈 第 13 行 )。 

在 onSuccess 函数 中 ，acceleration 类 的 用 法 与 上 一 节 介绍 的 完全 一 样 ， 但 在 31~34 行 中 使 用 
了 JavaScript 中 的 DOM 方法 ， 将 获取 到 的 信息 显示 到 页 面 上 。 

除 此 之 外 可 以 看 到 ， 在 本 例 中 还 多 了 一 个 自 定义 的 stopWatch() 方 法 ， 它 的 作用 是 调用 
accelerometer 的 clearWatch( 方 法 来 停止 对 设备 加 速 的 监听 , 这 样 就 保证 了 用 户 可 以 决定 在 什么 时 
候 开 始 和 停止 监听 设备 的 运动 情况 。 仍 然 用 记录 用 户 的 运动 量 来 举例 , 如 果 没 有 clearWatch() 方 法 ， 
那么 手机 将 会 记录 任何 时 刻 用 户 的 总 的 运动 量 ,但 是 有 了 clearWatch() 方 法 之 后 , 用 户 就 可 以 自行 
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决定 在 什么 时 候 开始 对 自己 的 运动 量 进行 计算 ， 比 如 可 以 计算 用 户 在 一 个 小 时 内 的 运动 量 。 
另外 ， 观 察 图 11.3 中 Time 值 的 变化 情况 ， 可 以 发 现 每 显示 一 条 数据 ， 时 间 戳 增 大 的 数字 均 
为 300， 可 见 该 时 间 戳 记录 的 单位 为 毫秒 ， 用 来 记录 设备 已 经 使 用 的 总 时 间 。 


可 以 暂停 监控 一 段 时 间 再 重新 开始 监控 ， 然 后 观察 时 间 惟 的 变化 来 验证 这 一 点 。 有 兴趣 的 读 
者 也 可 以 根据 该 值 来 计算 笔者 写本 节 内 容 所 花费 的 时 间 。 


11.1.3 ”详解 “加 速度 传感器 ”对 象 


在 之 前 的 例子 中 曾经 多 次 使 用 到 acceleration 对 象 ， 可 是 acceleration 对 象 究竟 包括 什么 内 容 
呢 ? 本 节 将 深入 剖析 acceleration 对 象 以 及 它 的 各 个 属性 。 

acceleration 对 象 中 封装 了 由 watchAcceleration() 方 法 或 getCurrentAcceleration() 方 法 获取 的 数 
据 ， 其 中 包括 了 4 个 属性 ， 分 别 是 x、y、z 和 timestamp。 其 中 x、y、z 分 别 保存 了 设备 在 x、y、 
z 3 个 方向 上 的 加 速度 ， 单 位 是 米 /二 次 方 秒 。 另 外 ， 由 于 设备 还 受到 重力 的 影响 ， 所 以 当 设 备 被 
安静 的 放 在 某 个 地 方 静止 不 动 时 ， 获 取 的 加 速度 应 为 x=0、y-0 和 z=9.81。 其 中 9.81 为 地 表 的 重 
力 加 速度 。 


必 寺 这 里 要 介绍 一 下 平时 常 说 的 重力 感应 功能 是 怎样 实现 的 。 由 于 当 手 机 平 放 静止 时 ， 仅 有 z 方 

| 向 受到 重力 ， 而 x、y 方向 的 重力 加 速度 均 为 0。 但 是 当 手 机 发 生 倾 斜 时 ， 就 变 成 了 由 3 个 方 
向 合成 重力 加 速度 ， 即 x、y、z 3 个 方向 的 平方 和 为 9.81 的 平方 。 通 过 测量 每 个 方向 的 重力 
加 速度 就 可 以 得 到 手机 倾斜 的 角度 了 。 


另外 ， 由 于 设备 获取 的 往往 是 一 瞬间 的 加 速 ， 因 此 在 使 用 获取 的 加 速 数据 时 ， 还 需要 对 这 些 
数据 进行 一 些 处 理 ， 以 免 操 作 过 于 突 元 。 比 如 读者 一 定 都 遇 到 过 这 样 的 问题 ， 测 量 1 包 大 米 的 重 
量 ， 为 了 保证 精确 需要 测量 多 次 求 平均 值 。 假 如 测量 了 4 次 的 数据 分 别 是 1 斤 、1 斤 、1.1 斤 还 有 
100 斤 。 那 么 显然 100 斤 是 错误 的 。 所 以 最 终 要 对 1 斤 、1 斤 还 有 1.1 斤 求 平 均值 。 在 实际 开发 中 
也 是 这 样 ， 假 如 x 方向 以 100 毫秒 为 间隔 监控 x 方向 的 加 速度 分 别 为 1、1、1、-0.5、1。 那 么 就 
需要 考虑 一 下 这 个 -0.5 要 怎么 处 理 了 。 


1 .2 加 速度 传感器 的 使 用 场景 


前 面 一 节 已 经 介绍 了 获取 设备 加 速度 信息 的 方法 ， 本 节 继 续 介绍 一 些 加 速度 传感器 适用 的 场合 。 
1. 游戏 
这 个 应 该 是 首先 能 想到 的 了 ， 像 比较 经 典 的 极品 飞车 17 就 采用 了 加 速度 传感器 (如 图 11.4 


201 


构建 跨 平台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


所 示 )。 利 用 手机 左右 摇摆 产生 的 加 速度 来 控制 车 辆 前 行 的 方向 。 另 外 还 有 一 些 飞 行 射击 游戏 也 是 
利用 了 类 似 的 方法 ， 比 如 ， 去 年 很 火 的 《钢铁 侠 》 系 列 游戏 ， 就 是 利用 手机 的 左右 摇摆 来 控制 人 
物 躲 避 迎 面 飞 来 的 武器 。 还 有 一 些 跑 酷 游戏 〈 如 神 庙 逃 亡 ) 也 是 如 此 。 

另外 一 类 游戏 就 是 迷宫 , 可 以 利用 手机 的 倾斜 来 控制 小 球 四 处 转动 最 终 逃 出 迷宫 。 由 此 可 见 ， 
加 速度 传感器 应 用 在 游戏 中 一 般 用 来 操纵 主角 进行 移动 ， 这 样 也 比较 符合 用 户 的 思维 习惯 。 


| 相信 不 少 读者 都 玩 过 老式 的 手 栖 游 戏 ， 在 主角 进行 跳跃 时 不 少 人 的 身体 都 会 随 着 跳跃 的 方向 
| 进行 倾斜 也 是 类 似 的 道理 。 


图 11.4 极品 飞车 17 游戏 画面 


2. 抽奖 

加 速度 传感器 的 作用 就 是 获取 设备 的 空间 变化 信息 ， 那 么 设备 的 摇动 自然 会 招来 足够 的 数据 
变化 ， 而 晃动 手机 的 动作 也 容易 让 用 户 联想 到 抽签 或 者 抓 间 时 的 志 坊 心情。 因此 一 些 应 用 采用 了 
加 速度 传感器 来 模拟 用 户 抽 奖 的 行为 。 此 外 微 信 等 社交 应 用 的 “ 摇 一 摇 ” 功 能 也 是 模拟 了 用 户 的 
这 一 思维 习惯 。 

3. 更 多 更 强大 的 交互 


实际 上 仍然 是 依靠 加 速度 传感器 的 变化 来 实现 对 设备 的 操纵 ， 但 是 范围 要 更 广 一 些 。 比 如 一 
些 手机 防 丢 的 应 用 会 在 加 速度 较 大 的 时 候 发 出 警报 ,或 者 是 在 用 户 握 住 手机 做 甩 凌 子 动作 时 ， 发 
出 鞭子 抽打 身体 的 声音 。 这 些 都 是 使 用 加 速度 传感器 的 例子 。 


地 理 位 置 的 使 用 


地 理 位 置信 息 对 构建 一 些 基于 LBS 式 的 场景 应 用 非常 有 用 , 如 你 走 到 超市 ， 超 市 定位 你 的 手 
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机 并 给 你 发 送 优惠 券 ， 这 都 是 场景 应 用 的 一 部 分 。 本 节 将 学 习 如 何 使 用 PhoneGap 获取 设备 的 地 
理 位 置 。 
11.3.1 获取 手机 地 理 信 息 


社交 应 用 中 经 常见 到 利用 手机 地 理 位置 的 场合 。 比 如 微 信 的 “ 摇 一 摇 ” 功 能 就 利用 了 GPS 来 
获取 用 户 的 地 理 位 置 。 图 11.5 是 微 信 利用 GPS 获取 两 用 户 之 间距 离 的 一 个 例子 。 


图 11.5 ” 微 信 通过 GPS 计算 用 户 之 间 的 距离 


PhoneGap 利用 类 Geolocation 来 获取 设备 所 在 地 理 位 置 的 坐标 .对 于 一 些 不 支持 GPS 的 设备 ， 
Geolocation 类 还 可 以 借助 耳 地 址 、RFID、WiFi、 蓝 牙 的 MAC 地 址 或 GSM/CDMA 手机 ID 的 网 
络 信号 做 出 推断 ， 以 保证 其 兼容 性 。 


且 元 虽然 基于 人 P 地 址 、GSM 基站 等 方法 都 可 以 保证 返回 设备 所 在 地 理 位 置 的 经 度 和 纬度 ， 但 是 
这 样 得 到 的 结果 却 不 一 定 准 确 。 在 实际 开发 时 ， 仍 然 要 充分 考虑 到 使 用 不 支持 GPS 的 设备 可 
| 能 存在 的 误差。 


11.3.2 ”获取 当前 所 在 坐标 


在 Geolocation 类 中 ， 最 基本 的 方法 就 是 getCurrentPosition() 了 ， 它 的 作用 是 通过 一 个 Positon 
对 象 来 返回 设备 所 在 的 位 置信 息 。 下 面 是 使 用 getCurrentPosition() 方 法 的 一 个 例子 。 


01 <script src="cordova.js" type="text/javascript"></script> 
02 <script> 


03 document .addEventListener ("deviceready", onDeviceReady, false); 
04 // 设备 加 载 完毕 ， 开 始 获取 位 置信 息 
05 function onDeviceReady () { 
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运行 代码 后 ， 设 备 上 将 显示 出 当前 所 处 的 位 置信 息 ， 如 图 11.6 所 示 。 有 些 手 机 在 出 现 地 理 位 
置信 息 之 前 ， 会 有 一 个 提示 ， 如 图 11.7 所 示 ， 我 们 选择 “允许 ” 即 可 。 


获取 当前 位 置信 息 


你 的 当前 位 置 : 
经 度 : 116.4739203699999 
纬度 : 39.87001796999999 


海拔 高 度 : 0 许 *PhoneGap" 在 您 


人 允 使 用 该 
应 用 程序 时 访问 您 的 位 置 吗 ? 


精度 : 1414 
海拔 准确 度 : 不 允许 允许 


图 11.6 使 用 getCurrentPosition() 获 取 当 前 的 位 置信 息 11.7 允许 手机 获取 当前 的 位 置信 息 


鲍 如 有 要 在 去 机 上 进行 测试 ， 需 要 把 手机 的 定位 服务 打开 。 


本 例 使 用 了 方法 getCurrentPosition() 来 获取 设备 所 处 的 位 置信 息 ， 如 第 7 行 所 示 。 与 其 他 
PhoneGap 所 提供 的 API 相似 ， 该 方法 同样 是 将 处 理 成 功 和 失败 的 两 个 方法 onSuccess 和 onError 
作为 参数 。 

不 过 在 onSuccess0 方 法 中 默认 会 传送 一 个 position 对 象 ， 该 对 象 保存 了 两 个 子 对 象 coords 和 
timestamp。 其 中 coords 封装 了 一 系列 与 设备 当前 所 处 地 理 位 置 有 关 的 信息 ， 比 如 经 度 、 纬 度 、 海 
拔 等 等 。timestamp 对 象 则 只 是 单纯 地 记录 了 coords 对 象 被 创建 的 时 间 。 表 11.1 是 coords 对 象 中 
所 包含 的 各 个 属性 以 及 它们 的 含义 。 
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表 11.1 coords 对 象 中 封装 的 属性 


名 称 类 型 说 明 

latitude 数字 以 十 进 制 小 数 表示 的 纬度 信息 ， 精 确 到 小 数 点 后 六 位 

longitude 数字 以 十 进 制 小 数 表示 的 纬度 信息 ， 精 确 到 小 数 点 后 六 位 

altitude 数字 海拔 高 度 ， 单 位 为 米 

aoungy 数字 

altitvdeAceuracy 数字 

heading 数字 当前 设备 运动 状态 ， 以 正 北 为 零点 显示 当前 运动 方向 与 

向 的 角度 
总 数字 
在 代码 第 11~18 行 可 以 看 到 这 些 属性 的 使 用 , 需要 注意 的 是 , timestamp 并 不 只 是 单纯 的 以 小 

时 来 记录 coords 被 创建 的 时 间 ， 其 中 还 包含 了 年 、 月 以 及 所 处 的 时 区 等 信息 。 另 外 ， 想 必 有 不 少 
读者 是 使 用 虚拟 机 进行 测试 的 ， 那 么 可 以 利用 Eclipse 中 的 Emulator Control 面板 来 实现 对 地 理 信 


息 的 模拟 ， 如 图 11.8 所 示 ， 遗 憾 的 是 目前 仅 能 对 经 度 和 纬度 的 数据 进行 模拟 。 


[EProblens Sh Emulator Control 53 | Jon' 


Location Controls 
Manual GpX | KML 


® Decimal 


D Sexagesimal 


Longitude [121.44562 


Latitude | 31.05324 


Send 


11.8 在 虚拟 机 上 模拟 GPS 数据 


| 在 PhoneGap 中 并 不 是 单纯 地 使 用 GPS 中 获取 的 数据 来 显示 位 置信 息 的， 当 GPS 不 可 用 时 ， 
PhoneGap 还 会 利用 网 络 甚至 是 与 基站 的 通信 来 判断 当前 的 位 置 。 因 此 即使 在 不 具备 GPS 功 
| 能 的 设备 上 也 是 可 以 使 用 该 功能 的 。 


11.3.3 ”监控 手机 的 位 置 变化 


本 小 节 将 介绍 一 种 与 上 一 小 节 getCurrentPosition0 方 法 具有 类 似 功 能 的 方法 ， 只 不 过 它 能 够 
对 设备 的 位 置信 息 进行 连续 的 监控 。 看 到 这 一 点 ， 不 知道 读者 有 没有 联想 到 什么 ? 没 错 ， 那 就 是 
在 上 一 节 介绍 过 的 加 速度 传感器 ， 也 有 着 类 似 的 方法 用 来 监视 设备 加 速度 的 变化 。 下 面 展 示 了 
watchPosition() 方 法 的 使 用 。 


01 <script src="cordova.js" type="text/javascript"></script> 


02 <script> 
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运行 后 的 结果 如 图 11.9 所 示 ， 可 以 通过 修改 第 7 行 处 的 option 参数 ， 来 修改 程序 获取 设备 位 
置信 息 的 频率 。 


获取 当前 位 置信 息 


你 的 当前 位 置 : 
经 度 : 116.470822423205 
纬度 : 39.86813588887338 
海拔 高 度 : 45.35900497436523 
精度 : 165 

海拔 准确 度 : 


11.9 通过 watchPosition() 方 法 获取 的 设备 位 置信 息 
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通过 范例 不 难看 出 ， 该 方法 与 在 上 一 节 中 介绍 过 的 getCurrentPosition() 方 法 在 用 法 上 非常 类 
似 ， 只 是 增加 了 一 个 参数 option。 这 个 参数 option 是 干什么 的 呢 ? 
从 PhoneGap 提供 的 文档 中 可 以 了 解 到 ， 这 里 的 option 实际 上 是 一 个 geolocationOptions 类 型 
的 可 选 参数 ， 用 来 定义 对 程序 获取 位 置信 息 的 一 些 设置 。 它 的 具体 属性 以 及 说 明 参 见 表 11.2。 
表 11.2 option 对 象 中 的 属性 


名 称 类 型 说 明 | 

enableHighAceuracy | 布尔 类 型 ”| 提供 一 个 表明 应 用 程序 希望 获得 最 佳 可 能 结果 的 提示 ， 可 以 理解 为 
是 否 希望 使 用 高 精确 度 的 定位 

timeout 整数 型 。 | 两 次 获取 设备 位 置信 息 所 允许 的 最 大 时 间 间 隔 ， 单 位 为 毫秒 


应 用 程序 将 接受 一 个 缓存 的 位 置信 息 ， 当 该 缓存 的 位 置信 息 的 年 龄 


不 大 于 此 参数 设 定 值 ， 单 位 是 毫秒 


如 果 说 watchPosition0 的 用 法 就 具有 这 些 也许 已 经 足够 了 ， 但 是 在 某 些 应 用 上 却 可 能 会 有 一 
些 瑕 疯 ， 比 如 当 用 户 想 要 停止 获取 设备 位 置 时 该 怎么 办 呢 ? 总 不 可 能 让 用 户 亲 自 去 “后 台 ” 强 行 
关闭 掉 你 的 程序 吧 。 
事实 上 watchPosition() 还 提供 了 一 个 方法 ， 那 就 是 在 范例 第 27 行 用 到 的 clearWatch() 方 法 。 该 
方法 只 需要 一 个 参数 ， 就 是 当前 所 监视 位 置信 息 所 使 用 的 id， 那 么 这 个 id 又 是 从 哪里 来 的 呢 ? 再 
回 过 头 来 看 范例 第 9 行 。 在 watchPosition() 方 法 开始 执行 时 会 返回 一 个 id 数值 ， 而 在 本 范例 中 将 
这 个 数值 保存 在 了 变量 watchID 中 ， 因 此 当 想 要 停止 对 设备 位 置 的 监控 时 只 需要 执行 : 


navigator.geolocation.clearWatch (watchID); 


1 .A 指南 针 


PhoneGap 提供 了 一 款 Compass API 叫做 指南 针 ， 专 门 用 来 获取 设备 的 方向 ， 本 节 将 演示 
Compass 的 使 用 。 


11.4.1 获取 手机 的 方向 


指南 针 作 为 移动 设备 在 地 理 信息 方面 的 应 用 实在 是 太 深 入 人 心 了 ， 如 图 11.10 所 示 的 就 是 一 
款 指 南 针 应 用 的 界面 。 
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\PP: HTML 5 + Phonet 


图 11.10 一 款 指南 针 应 用 的 界面 


有 过 开发 应 用 经 验 的 读者 可 能 都 知道 ， 想 要 开发 一 个 具有 动画 效果 (如 指南 针 的 转动 》 的 应 


E 够 比较 轻松 地 实现 这 样 的 动画 效果 ， 那 是 不 是 也 可 以 用 


PhoneGap 来 实现 一 款 指南 针 呢 ?答案 是 肯定 的 。 


如 果 要 


: 现 指南 针 的 功能 ， 就 必须 要 有 能 够 获取 设备 方向 的 API， 这 正 是 在 本 节 所 要 介绍 的 


内 容 。 下 面 就 用 Compass 的 getCurrentHeading() 方 法 来 演示 一 下 如 何 获 取 设 备 的 方向 。 
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<script src="cordova.js" type="text/javascript"></script> 
<script> 
// 设置 当 设备 加 载 完毕 后 执行 的 触发 函数 onDeviceReady 
document .addEventListener ("deviceready", onDeviceReady, false); 
function onDeviceReady () { 
// 设备 加 载 完 毕 后 执行 getCurrentHeading() 方 法 
navigator.compass.getCurrentHeading (onSuccess, onError); 
} 
// 当 获 取 设 备 方向 后 执行 该 函数 
function onSuccess (heading) { 
// 弹出 消息 框 显示 当前 设备 方向 
alert (" 当 前 设备 方向 与 正 北方 相差 ”+ heading.magneticHeading + " 度 "); 
} 
// 当 获 取 设 备 方向 失败 时 执行 该 函数 
function onError (compassError) { 


alert ("获取 设备 方向 失败 ") ; 
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运行 结果 如 图 11.11 所 示 ， 得 出 的 结果 是 笔者 的 手机 现在 正 朝向 正 北 ， 不 知道 读者 对 这 个 数 
据 有 没有 感到 有 一 些 疑惑 ， 有 没有 惊讶 笔者 是 如 何 实现 让 手机 一 点 不 差 的 朝向 正 北 的 。 


Alert 


当前 设备 方向 与 正 北方 相差 0 度 


OK 


图 11.11 在 虚拟 机 上 获取 了 当前 设备 方向 与 正 北 相差 零度 


原因 就 在 于 笔者 现在 是 在 虚拟 机 上 进行 的 测试 , 而 虚拟 机 中 没有 提供 开发 者 检测 方向 的 接口 ， 
因此 虽然 程序 没有 错误 ， 能 够 读 取 到 方向 信息 ， 但 也 只 能 得 到 一 个 0 度 的 结果 。 


本 忆 读者 在 使 用 PhoneGap 的 指南 针 功能 时 一 定 要 在 真 机 进行 测试 , 图 11.12 是 笔者 在 真 机 上 测试 
[ 所 得 的 结果 。 


getCurrentHeading() 方 法 的 使 用 与 其 他 PhoneGap 中 的 API 非常 类 似 ， 依 然 是 在 回调 函数 


onSuccess 中 对 获取 到 的 结果 进行 处 理 。 该 方法 传递 来 的 结果 是 一 个 heading 对 象 , 它 包含 了 表 11.3 
所 示 的 4 个 属性 。 


http://192.168.1.106 
当前 设备 方向 与 正 北方 相差 
150.1732482910156 度 


OK 


11.12 在 真 机 上 测试 得 到 了 正确 的 方向 
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表 11.3 heading 对 象 中 的 属性 


用 来 表示 设备 在 某 一 时 刻 相对 于 正 北方 向 偏 移 的 角度 ， 它 的 值 从 0 到 
359.99 不 等 


与 magneticHeading 相同 ， 但 是 当当 前 的 方向 不 确定 时 ， 比 如 你 现在 正 
在 北极 ， 那 么 该 属性 的 值 将 是 负 的 


是 测量 的 方向 可 能 存在 的 误差 
用 来 记录 获取 设备 方向 的 时 间 ， 单 位 是 毫秒 


11.4.2 ”监视 手机 方向 的 两 种 方法 


在 获取 设备 的 位 置信 息 时 ， 可 以 使 用 getCurrentPosition0 和 watchPosition0， 而 在 获取 设备 的 
方向 时 除了 可 以 使 用 上 一 节 中 介绍 的 getCurrentHeading(0) 之 外 ， 还 可 以 使 用 另 一 个 方法 
watchHeading0) 来 对 设备 的 方向 进行 监视 。 下 面 就 看 一 个 用 watchHeading() 方 法 监视 设备 方向 的 例 
子 。 


eg 
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运行 结果 如 图 11.13 所 示 ， 如 果 点 击 屏幕 项 部 的 “显示 当前 方向 ”字样 ， 则 会 停止 对 设备 方 
向 的 监视 。 


显示 当前 的 方向 


当前 设备 方向 是 : 
122.177116394043 


1424601693204.118 


11.13 监视 设备 方向 所 得 的 结果 


通过 对 范例 的 阅读 可 以 发 现 ，watchHeading() 的 使 用 与 前 面 介绍 过 的 watchPosition() 方 法 是 一 
样 的 ， 因 此 这 里 就 不 再 对 它 的 用 法 做 过 多 的 重复 介绍 了 。 
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【1 .5 实例 : 手机 “ 摇 一 摇 ” 出 大奖 


2015 半年 春晚 最 大 的 事情 是 微 信和 春晚 的 互动 ， 大 家 通过 摇 一 摇 能 抢 红包 ,简直 是 火 遍 大 江 
南北 ， 平 均 每 分 钟 最 高 峰值 是 8 亿 次 的 手机 摇晃 。 所 以 这 个 摇 一 摇 功 能 真心 好 用 ， 笔 者 就 利用 本 
章 所 学 的 API， 设 计 一 个 摇 一 摇 出 大 奖 的 小 动画 。 


11.5.1 原形 设计 
笔者 希望 在 手机 屏幕 上 显示 出 一 个 卡通 马 的 造型 , 马 背 朝向 屏幕 的 右上 方 , 马 背 项 部 为 空白 。 


当 用 户 摇晃 手机 时 ， 马 背 上 方 的 空白 随机 显示 出 房子 、 钞 票 、 汽 车 、 美 女 等 物 。 为 了 衬托 喜庆 气 
氛 还 要 将 背景 改 为 红色 。 图 11.14 所 示 的 是 界面 设计 。 


图 11.14 界面 设计 


最 初 ， 屏 幕 上 只 显示 中 间 的 卡通 马 图 案 ， 当 用 户 摇晃 手机 后 ， 随 机 以 渐 显 的 形式 显示 出 钱 、 
房子 或 汽车 的 图 案 ， 再 在 屏幕 的 下 方 显示 相应 的 文字 :“ 马 上 有 钱 / 房 /车 ”。 


11.5.2 ”素材 准备 


理 清 思 路 之 后 开始 准备 素材 ， 本 项 目 需要 4 张 图 片 ， 内 容 依次 为 : 马 、 钱 、 汽 车 、 房 子 ， 如 
图 11.15~ 图 11.18 所 示 。 
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图 11.16 素材 “ 钱 ” 图 11.17 素材 “汽车 图 11.18 素材 “房子 ” 


钱 、 汽 车 和 房子 的 素材 笔者 只 截取 了 整个 素材 的 一 部 分 ， 实 际 上 它们 的 素材 图 片 尺寸 与 素材 
“ 马 ”的 图 片 尺寸 是 相同 的 ， 这 样 摆好 让 它们 和 马 之 问 的 位 置 保持 背景 透明 。 只 要 让 它们 的 


位 置 重 短 就 可 以 实现 马 背 上 的 效果 了 。 


11.5.3 ”动画 实现 


在 PhoneGap 中 新 建 一 个 文件 夹 命名 为 images, 其 中 放置 好 这 4 张 图 片 。 本 例 将 使 用 生成 1~3 
的 随机 数 来 决定 以 渐 显 的 方式 显示 某 一 图 片 的 代码 ， 如 下 所 示 。 
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编译 之 后 运行 结果 如 图 11.19 所 示 ， 马 背 上 渐渐 出 现 了 一 个 大 大 的 “金币 ”， 并 在 底部 显示 
金黄 的 大 字 “ 马 上 有 钱 ”。 
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11.19 屏幕 上 显示 “马上 有 钱 ” 


范例 第 76~78 行 用 来 显示 屏幕 上 图 片 的 页 面 元 素 ， 其 中 id 为 rec 的 元 素 用 来 显示 底部 的 卡通 
马 造 型 ， 在 其 上 方 覆 盖 了 一 块 与 它 大 小 完全 相同 的 元 素 。id 为 img 用 来 显示 钱 、 房 子 或 者 车 的 图 
案 。 在 准备 素材 时 ， 不 管 是 马 还 是 其 他 图 案 ， 背 景 都 是 透明 的 ， 所 以 相互 遮挡 之 后 ， 就 能 够 形成 
有 东西 被 放置 在 马 背 上 的 感觉 。 

之 后 要 做 的 就 是 让 图 片 以 渐 显 的 形式 显示 了 ， 虽 然 jQuery 中 有 现成 的 渐 显 渐 隐 函数 可 以 使 
用 , 但 是 本 范例 还 是 使 用 原生 的 JavaScript。 通过 setInterval() 函 数控 制图 片 的 透明 度 达到 渐 显 的 目 
的 〈 如 范例 第 27 行 所 示 )。 

setInterval() 以 50 毫秒 为 间隔 调用 了 自 定义 函数 opa_change0 来 实现 对 图 片 透明 度 的 控制 〈 范 
例 第 29~40 行 )。 其 中 变量 ipoa 用 来 存放 图 片 透明 度 的 具体 数值 ， 当 该 值 为 1 时 图 像 完 全 显示 ， 
系统 调用 函数 clearInterval0 来 结束 计数 器 的 使 用 。 为 了 配合 这 一 过 程 ， 在 设 定 img 元 素 的 样式 时 
就 已 经 将 它 的 透明 度 设 置 为 0， 如 范例 第 71 行 所 示 。 


攻打 | 本 例 在 第 9 行 初始 化 了 变量 ipoa 的 值 为 0。 由 于 变量 作用 域 的 限制 ， 如 果 在 函数 
onDeviceReady() 中 使 用 ， 将 会 导致 ipoa 被 系统 判定 为 局 部 变量 而 无 法 使 用 。 因 此 在 定义 
全 局 变量 时 一 定 不 要 将 它 声明 在 函数 中 。 另 外 ， 由 于 CSS 样式 的 继承 效果 ， 如 果 给 rec 
元 素 加 入 透明 属性 ， 那 么 其 内 部 的 img 元 素 也 会 跟着 透明 ， 因 此 该 属性 只 能 赋 给 处 于 顶 
层 的 img 元 素 使 用 。 


范例 第 10 行 生成 了 一 个 大 小 为 0~2 的 随机 数 ， 用 来 确定 最 终 显 示 哪 幅 图 片 ， 该 值 会 在 
onDeviceReady0 函 数 中 被 使 用 (范例 16~21 行 )。 除 此 之 外 ， 还 要 在 屏幕 下 方 显示 一 行 贺 词 ， 该 
功能 也 是 在 此 处 实现 的 。 
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ET 


11.5.4 “最终 实现 


上 一 小 节 已 经 实现 了 “拜年 ”的 动画 ， 本 小 节 要 将 这 一 动画 与 本 章 学 习 的 加 速度 传感器 结合 
起 来 ， 使 它 能 够 带 给 用 户 一 种 在 庙会 抽签 祈福 的 紧张 气氛 。 
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速度 、 地 理 位 置 和 指南 针 
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将 该 范例 编译 运行 之 后 ， 屏 幕 上 将 会 弹出 对 话 框 提示 : “摇晃 手机 后 出 现 祝福 ”， 之 后 用 力 
摇晃 手机 ， 图 像 以 及 贺词 将 会 随 着 手机 的 轻微 震动 渐渐 浮现 。 

首先 ， 此 次 修改 去 掉 了 前 面 代码 中 第 23 行 处 对 start0) 函 数 的 调用 ， 增 加 对 加 速度 传感器 的 监 
听 ， 如 范例 第 53~57 行 所 示 。 这 里 就 遇 到 了 一 个 难题 ， 因 为 即使 是 一 般 静 止 情 况 下 ， 手 机 还 是 会 
带 有 一 定 加 速度 的 ， 那 么 怎样 才能 确定 手机 是 被 用 户 晃动 了 而 非 一 般 的 移动 ， 或 者 根本 只 是 正常 
的 轻微 幅度 抖动 呢 ? 

范例 第 65 行 有 一 个 判断 ， 将 来 自 3 个 方向 的 加 速度 的 平方 和 再 开 方 ， 得 到 一 个 “平均 的 ” 加 
速度 。 这 里 将 判定 是 否 是 人 为 “摇晃 ”的 临界 点 定 为 15， 即 当 总 的 加 速度 大 于 15 时 判定 是 人 为 
地 摇晃 手机 。 为 了 更 加 保险 ， 笔 者 还 做 了 进一步 的 约束 ， 在 范例 72 行 中 使 用 了 一 个 变量 u_roll 
记录 的 大 于 15 的 晃动 次 数 与 10 次 作 比 较 。 也 就 是 说 只 有 获取 到 10 次 比较 剧烈 的 晃动 后 ,系统 才 
会 判定 用 户 晃 动 了 手机 ， 开 始 显示 祝贺 。 


果 ， 在 此 就 不 过 多 赣 述 了 。 


另外 , 为 了 让 用 户 获得 更 加 真实 的 体验 , 在 范例 第 70 行 还 使 用 上 一 章 介绍 的 震动 来 作为 反 
馈 。 注 意 ， 本 例 中 震动 的 时 间 为 300 毫秒 ， 正 好 与 加 速度 监听 器 的 频率 是 相同 的 ， 不 至 于 产生 两 
次 震动 舍 加 的 bug。 
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11 .6 如 果 默 认 没有 安装 Geolocation 怎么 办 


从 PhoneGap 3.0 开始 ，Geolocation 作为 一 个 API 需要 单独 安装 。 但 是 最 新 的 版 本 已 经 默认 都 
包含 了 Geolocation， 如 果 你 使 用 的 版 本 没有 它 ， 可 以 通过 本 节 的 知识 来 解决 。 

这 里 需要 注意 ， 安 装 的 时 候 一 定 要 到 当前 项 目下 安装 ， 为 保证 初学 者 能 顺利 安装 ， 下 面 给 出 
详细 的 步骤 。 


人 ED) 打开 Nodejs 命令 行 ， 使 用 cd 命令 切换 到 当前 项 目下 ， 输 入 命令 : 


人 2 然后 使 用 1s 命令 查看 是 否 安装 好 ， 如 果 安 装 完毕 ， 则 显示 如 图 11.20 所 示 的 界面 , 会 显 
示 Geolocation 的 版 本 号 。 


:\hook\helloworld\helloworld>phonegap plugin add org.apache.cordova.geolocati 


Fetching plugin “org.apache.cordova.geolocation" via plugin registry 


Pi \hook\he lloworld\helloworld>phonegap plugin ls 
brg-apache .cordova.geolocation 0.3.12 "Geolocation” 


图 11.20 ”安装 后 的 插件 列表 


人 03 回 到 资源 管理 器 ， 打 开 当 前 项 目下 的 plugins 文件 夹 ， 会 发 现 已 经 有 一 个 
org.apache.cordova.geolocation 文件 夹 ， 打 开 它 ， 内 容 如 图 11.21 所 示 。 


2015/2/22 17:42 
2015/2/22 17:42 
tests 2015/2/22 17:42 
上 mm 2015/2/22 17:42 
国 fetch json 2015/2/22 17:42 


口 ] CONTRIBUTING. nd 2015/2/22 17:42 
口 CERSE 2015/2/22 17:42 
Dwrrce 2015/2/22 17:42 
国 package json 2015/2/22 17:42 
EB plugin xml 2015/2/22 17:42 
LL READNE. md 2015/2/22 17:42 
[DD RELEASENOTES. nd 2015/2/22 17:42 


11.21 ”geolocation 文件 夹 
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人 4 安装 完成 后 ， 我 们 还 需要 在 configxml 文件 中 配置 该 插件 ， 打 开 项 目 根 目录 下 的 
config.xml， 在 其 中 添加 如 下 配置 : 


罗网 。 如 果 没 有 安装 Compass， 也 可 以 通过 上 述 步骤 来 安装 。 


吕 


11.7 小 


本 章 学 习 了 使 用 accelerometer 对 象 获取 设备 加 速 信息 的 方法 ， 并 详细 地 介绍 了 加 速度 传感器 
使 用 的 场合 ， 希 望 对 读者 能 有 所 启发 。 然 后 学 习 了 使 用 PhoneGap 获取 设备 的 地 理 位 置 和 方向 的 
信息 。 通 过 本 章 的 学 习 ， 读 者 还 应 当 能 够 体会 到 PhoneGap 所 提供 的 API， 在 用 法 上 的 一 些 共同 
思路 ， 理 解 了 这 种 思路 之 后 ，PhoneGap 的 学 习 之 路 会 容易 许多 。 
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对 多 媒体 文件 的 处 理 能 力 是 智能 手机 一 个 非常 重要 的 功能 ， 像 百度 音乐 、 酷 狗 音 乐 等 音乐 播 
放 器 都 是 智能 手机 上 必 装 的 应 用 之 一 。 因 此 在 开发 智能 手机 应 用 时 ， 对 音频 文件 的 处 理 是 每 一 个 
开发 者 都 必须 掌握 的 。 在 PhoneGap 中 ,Media 对 象 提供 了 对 音频 文件 的 播放 和 录制 的 功能 。 当 然 ， 
媒体 文件 有 很 多 ， 并 不 止 有 音频 一 种 ， 所 以 PhoneGap 专门 提供 Capture 对 象 来 实现 系统 对 图 像 、 
音频 和 视频 资源 采集 的 调用 。 本 章 将 重点 学 习 这 两 个 对 象 。 


本 章 主要 内 容 : 


e@ 学习 Media 和 Capture 的 基本 使 用 

@ 学 习 对 音频 的 播放 、 暂 停 和 停止 方法 的 调用 
@ 使 用 Capture 采集 音频 、 图 像 和 视频 

®。 设计 一 个 属于 自己 的 录音 机 


1 2 .1 音频 的 处 理 


在 常见 的 音乐 播放 器 中 ， 音 频 的 处 理 主要 有 播放 、 和 暂停 、 停 止 、 录 音 等 功能 ， 本 节 将 利用 
Media 对 象 来 学 习 如 何在 PhoneGap 中 实现 这 些 功能 。 


12.1.1 利用 PhoneGap 播放 网 络 音乐 音频 
本 小 节 先 给 出 一 个 例子 ， 它 可 以 播放 一 段 来 自 于 网 络 的 音乐 ， 代 码 如 下 所 示 。 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 


程序 运行 之 后 ， 点 击 屏幕 上 的 “利用 PhoneGap 播放 音乐 ”字样 ， 就 可 以 听 到 有 音乐 从 手机 
扬声器 中 发 出 ， 并 弹出 对 话 框 ， 内 容 为 “playAudio():Audio Success”， 用 以 提示 用 户 Media 对 象 
创建 成 功 接 下 来 我 们 结合 范例 代码 讲解 在 PhoneGap 中 利用 Media.play0 方 法 播放 音乐 的 方法 。 
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在 PhoneGap 中 ，Media 对 象 为 开发 者 提供 了 控制 设备 音频 的 能 力 ， 其 中 paly() 方 法 用 来 播放 
指定 的 音频 文件 。 在 使 用 play0 方 法 时 , 首先 要 指定 音频 文件 的 来 源 ( 如 第 21 行 所 示 ) 由 于 play0 
方法 可 以 同时 支持 本 地 和 网 络 的 音频 文件 ， 为 了 便于 理解 这 里 使 用 了 网 络 上 音频 文件 的 url 地 址 。 

第 22 行 创建 了 一 个 新 的 Media 对 象 ， 与 PhoneGap 中 的 大 多 数 其 他 方法 一 样 ， 在 创建 Media 
对 象 时 ， 需 要 定义 回调 函数 。 


在 最 初 的 时 候 ，PhoneGap 处 理 音 频 的 API 并 没有 遵循 W3C 规则 ， 仅 仅 是 为 开发 者 提供 了 一 


个 方便 调用 的 接口 ， 但 是 随 着 版 本 的 更 新 和 PhoneGap 的 不 断 完 善 ， 目 前 这 一 现象 已 经 得 到 
了 很 好 的 改善 。 


创立 一 个 Media 对 象 的 参数 有 4 个 ， 以 下 是 官方 对 该 对 象 的 声明 : 


在 该 声明 中 有 4 个 参数 ， 其 中 音频 文件 的 源 地 址 和 Media 对 象 创建 成 功 的 回调 函数 
mediaSuccess() 是 必 选 的 ， 而 其 他 两 个 参数 是 可 选 的 。 可 选 参数 中 ，mediaError0 函 数 用 来 对 Media 
对 象 创建 失败 的 情况 进行 操作 ，mediaStatus0 是 在 音频 播放 状态 发 生变 化 时 所 调用 的 函数 。 

接 下 来 就 可 以 调用 Media 的 play() 方 法 对 音频 进行 播放 了 ， 如 范例 第 24 行 所 示 。 


12.1.2 ”为 播放 音乐 设置 暂停 功能 


上 一 小 节 学 习 了 利用 Media 对 象 的 paly() 方 法 来 播放 音乐 ， 但 是 在 测试 范例 时 遇 到 了 一 点 小 
问题 ， 就 是 一 旦 音乐 开始 播放 ， 那 声音 就 像 春晚 的 小 彩旗 一 样 根 本 停 不 下 来 。 试 想 ， 如 果 做 了 这 
样 一 款 音乐 播放 器 ， 会 有 用 户 喜欢 嘛 ? 所 以 ， 除 了 播放 之 外 ， 对 已 经 播放 了 音乐 的 暂停 也 是 在 实 
际 开发 中 非常 重要 的 一 个 部 分 。Media 提供 了 pause0 方 法 来 暂停 音乐 ， 下 面 我 们 继续 完善 前 面 音 
乐 播放 的 例子 。 
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程序 运行 之 后 ， 点 击 屏幕 上 的 “利用 PhoneGap 播放 音乐 ”字样 ， 就 可 以 听 到 有 音乐 从 手机 
扬声器 中 发 出 ， 再 点 击 “ 暂 停 音乐 播放 ”字样 则 音乐 会 被 暂停 。 其 原因 就 在 于 点 击 “ 暂 停 音乐 播 
放 ” 后 , 会 调用 自 定义 函数 pauseAudio(), 而 在 pauseAudio() 函 数 中 则 会 调用 Media 对 象 的 pause() 
方法 (范例 第 29 行 所 示 )。 

看 第 28 行 会 发 现 ， 在 pause0 方 法 外 还 有 一 个 f 判断 ， 它 的 作用 是 在 暂停 音乐 之 前 ， 先 判断 
Media 对 象 是 否 确实 存在 ， 在 实际 开发 中 ， 如 果 要 对 改变 某 一 对 象 的 状态 ， 先 判断 它 的 存在 性 是 
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非常 重要 的 。 


12.1.3 为 播放 音乐 设置 停止 功能 


上 一 小 节 学 习 了 利用 pause() 暂 停 播放 音频 文件 的 方法 本 节 将 继续 学 习 一 种 与 pause() 非 常 类 
似 却 又 有 不 少 区 别 的 方法 : stop0，Media 对 象 用 它 来 停止 播放 音乐 。 本 例 继续 完善 音乐 播放 器 的 
例子 ， 代 码 如 下 : 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


运行 之 后 ， 可 以 通过 点 击 屏幕 上 的 “停止 音乐 播放 ”字样 ， 来 停止 播放 正在 播放 中 的 音乐 。 
与 pause( 方 法 不 同 的 是 ， 使 用 pause() 方 法 暂停 的 音乐 可 以 通过 play() 方 法 继续 播放 ， 而 使 用 stop() 
方法 停止 播放 的 音乐 想 要 再 进行 播放 ， 将 会 从 头 开始 。 

可 以 再 在 页 面 中 加 入 pause() 方 法 来 比较 两 方法 的 不 同 ， 如 图 12.1 所 示 。 


利用 PhoneGap 播 放 


音乐 
暂停 音乐 播放 
停止 音乐 播放 


图 12.1 对 比 pause0 和 stop0 方 法 的 不 同 


12.1.4 获取 音频 文件 的 更 多 信息 

在 音乐 播放 器 的 界面 上 通常 都 会 有 一 条 “ 线 ”用 来 表示 音乐 播放 的 总 时 长 和 进度 ， 如 图 12.2 
所 示 。 如 果 想 要 实现 这 样 的 功能 ， 就 需要 获得 音频 文件 的 总 长 度 以 及 当前 音频 文件 播放 的 进度 。 
PhoneGap 也 提供 了 这 样 的 方法 。 


图 12.2 酷 狗 音乐 中 的 进度 条 
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media.getDuration() 方 法 的 作用 是 返回 一 个 音频 文件 的 总 时 长 ，media.getCurrentPosition() 的 作 
用 是 返回 当前 音频 文件 所 播放 到 的 位 置 ， 下 面 的 例子 将 使 用 它们 来 获取 一 首 歌 的 总 时 长 以 及 播放 
进度 。 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 5 


运行 结果 如 图 12.3 所 示 。 
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1.281/9.445 
利用 PhoneGap 播 放 


音乐 
停止 音乐 播放 


图 12.3 ”获取 音频 文件 的 播放 位 置 以 及 总 长 度 


getDuration() 和 getCurrentPosition() 的 返回 值 都 是 一 个 单位 为 秒 的 小 数 ， 分 别 用 来 表示 音乐 的 
总 长 度 以 及 当前 播放 进度 。 若 想 要 获取 音频 文件 的 总 长 度 ， 可 直接 使 用 getDuration0 方 法 ， 如 范 
例 第 30 行 所 示 。 从 理论 上 来 说 ，getCurrentPosition() 也 是 如 此 使 用 ,但 是 由 于 它 的 作用 是 返回 音 
乐 当前 播放 位 置 ， 这 就 决定 了 它 代表 的 是 一 个 动态 的 过 程 。 

因为 音频 文件 是 在 不 断 播 放 的 , 因此 不 可 能 保证 当前 屏幕 上 显示 的 时 间 就 是 当前 的 播放 进度 ， 
为 了 尽量 精确 就 需要 使 用 JavaScript 中 的 setInterval0 方 法 来 配合 ， 如 范例 第 32 行 所 示 。 

当 使 用 了 getCurrentPosition0) 后 ， 所 获得 的 数据 会 被 保存 在 对 象 position 中 ， 此 时 就 可 以 利用 
获取 播放 进度 成 功 的 回调 函数 来 处 理 获 得 的 数据 。 


12.1.5 ”播放 指定 位 置 的 音乐 


上 一 小 节 介绍 了 利用 PhoneGap 获取 音频 文件 总 长 度 以 及 当前 播放 位 置 的 方法 ， 通 过 这 两 个 
方法 再 加 上 CSS 和 JavaScript 的 配合 ， 就 已 经 能 够 完成 一 个 不 错 的 带 进度 条 的 播放 器 了 。 相 比 目 
前 比较 成 熟 的 应 用 中 的 进度 条 ， 比 如 酷 狗 音乐 ， 还 缺少 了 利用 进度 条 来 调整 播放 进度 的 功能 。 但 
是 没有 关系 ， 本 节 将 介绍 一 个 方法 来 弥补 这 个 不 足 ， 还 是 先 来 看 代码 。 
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运行 之 后 ， 音 乐 会 自动 播放 ， 当 播放 到 5 秒 和 10 秒 处 时 ， 音 乐 会 有 一 个 短暂 的 停顿 发 生 ， 图 
12.4 所 示 为 第 10 秒 音乐 刚 从 停顿 中 恢复 时 的 截图 。 


播放 
停止 
10.527 sec 


图 124 音乐 播放 至 10 秒 左 右 时 的 截图 
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具体 的 效果 还 请 读者 实际 去 运行 程序 来 感受 ， 这 里 需要 提醒 大 家 的 是 : 由 于 运行 效率 等 方面 
的 原因 ， 在 PhoneGap 中 的 计时 并 不 十 分 精确 甚至 有 着 较 大 的 误差 。 因 此 在 使 用 此 类 功能 时 
一 定 要 做 好 测试 ， 避 过 可 能 存在 的 误差 。 


12.1.6 ”使 用 PhoneGap 录制 声音 


Media 对 象 除了 可 以 播放 音频 之 外 ， 还 有 一 个 重要 的 功能 就 是 实现 对 音频 的 录制 ， 这 一 功能 
是 通过 Media 对 象 的 startRecord0 方 法 和 stopRecord() 方 法 实现 的 。 下 面 通过 一 个 例子 来 演示 一 下 
这 两 个 方法 。 
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运行 之 后 ,点击 屏幕 上 的 “开始 录音 ”字样 即 可 开始 录音 ， 底 部 进行 计数 ， 当 计数 到 10 时 录 
音 结束 ， 可 以 点 击 “ 播 放 ” 字 样 播放 刚刚 录 下 的 声音 ， 如 图 12.5 所 示 。 


雷 录制 的 音频 文件 扩展 名 在 苹果 设备 中 要 改 为 .wav。 | 


开始 录音 
播放 


10 sec 


12.5 录音 结束 开始 播放 
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与 播放 音频 一 样 ， 在 录制 音频 时 也 需要 先 定义 一 个 Media 对 象 ， 如 代码 第 12、13 行 所 示 ， 
不 同 的 是 ， 第 一 个 参数 必须 要 定义 一 个 文件 用 来 存放 录制 的 音频 ， 本 例 中 为 “myrecording.mp3 ”。 
之 后 就 可 以 使 用 startRecord() 方 法 对 声音 进行 录制 了 ， 如 代码 第 15 行 所 示 。 

接 下 来 又 使 用 了 一 个 setInterval0 方 法 ， 它 的 作用 是 控制 录音 时 间 的 长 短 ， 但 是 由 于 在 
PhoneGap 中 ， 计 数 器 实现 的 时 间 并 不 十 分 精确 纯 JavaScript 中 该 函数 所 计算 出 的 时 间 都 不 是 非 
常 精确 )， 因 此 在 实际 开发 中 建议 还 是 手动 来 结束 录音 。 


如 果 要 定时 录制 一 段 较 长 的 音频 ， 可 以 通过 不 断 获取 系统 时 间 的 方法 ， 来 实现 较 精确 定时 的 
目的 。 


12.1.7 ”资源 有 限时 释放 音频 资源 


在 C 语言 中 如 果 要 调用 一 段 内 存 可 以 使 用 函数 malloc0 来 实现 用 过 之 后 , 则 可 以 使 用 free() 
函数 来 释放 这 一 段 内存 ， 比 如 : 


在 PhoneGap 中 也 有 这 样 类 似 的 操作 。 由 于 无 论 是 设备 还 是 受 JavaScript 效率 的 限制 ， 系 统 所 
能 使 用 的 资源 都 是 有 限 的 ， 因 此 在 资源 不 用 时 要 及 时 进行 回收 。PhoneGap 的 Media 对 象 并 没有 专 
门 用 来 释放 资源 的 方法 ， 因 此 当 需 要 替换 原 有 资源 时 会 造成 浪费 。 这 时 可 以 使 用 Media 对 象 的 
release() 方 法 。 


1 2 .2 使 用 Capture 来 采集 声音 


Capture 在 英文 中 包含 了 俘虏 、 捕 获 等 含义 ， 在 实际 使 用 中 也 可 以 近似 地 被 翻译 为 采集 。 由 
此 就 可 以 联想 到 ， 它 不 提供 Media 类 中 已 经 学 习 过 的 播放 、 和 暂停 等 功能 ， 所 能 实现 的 只 有 录制 或 
者 摄制 功能 。 那 么 它 与 Media 类 的 录音 功能 又 有 什么 区 别 呢 ? 接 下 来 将 以 一 个 使 用 Capture 对 象 
来 进行 声音 采集 的 例子 进行 讲解 。 
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运行 之 后 的 界面 如 图 12.6 所 示 ， 点 击 屏幕 上 方 的 “开始 录音 ”按钮 ， 设 备 开 始 进行 音频 的 采 
集 ，iOS 设备 的 话 会 调用 手机 自己 的 录音 功能 ， 如 图 12.7 所 示 。 


ET 全 67% 本 了 eecoco 中 国 移动 兮 ”22:13 @ 62% 7 


开始 录音 


12.6 运行 效果 图 12.7 调用 iOS 设备 的 录音 界面 
首先 ， 在 页 面 中 定义 了 一 个 红色 的 按钮 ， 并 为 它 加 入 了 点 击 事件 onclick="myptureAudio();"， 
如 范例 第 39 行 所 示 。 而 在 前 面 的 JavaScript 中 ， 一 切 的 操作 也 都 是 从 自 定义 函数 myptureAudio0 
开始 的 。 
在 这 个 自 定义 函数 中 ， 只 执行 了 一 步 操作 ， 如 果 是 iOS 设备 ， 则 只 有 一 个 成 功 函数 和 失败 函 
数 。 如 果 读 者 使 用 的 是 安 卓 设备 ， 可 以 添加 一 个 参数 ， 如 下 : 
navigator.device.capture.captureAudio (captureSuccess, captureError, {limit:2}); 
在 captureAudio0 方 法 中 ， 还 多 出 了 一 个 参数 {limit:2}， 它 表示 录制 两 个 音频 文件 。 
其 实 最 后 一 个 参数 是 一 个 CaptureAudioOptions 类 型 的 对 象 , 包含 了 对 音频 采集 时 一 些 参数 的 
设置 ， 它 包含 的 3 个 属性 如 表 12.1 所 示 。 
表 12.1 CaptureAudioOptions 类 中 的 3 个 属性 


limit 采集 音频 数量 的 最 大 值 ， 默 认 值 为 1 
| duration 采集 时 间 | 
ee 选 定 的 音频 格式 ， 访 属性 在 早期 版 本 中 使 用 ， 现 已 被 取消 | 


也 就 是 说 ， 范 例 中 的 第 11 行 实际 上 可 以 改写 成 如 下 的 样子 : 
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options.limit = 2; 
options.duration = 10; 
navigator.device.capture.captureAudio (captureSuccess, captureError, options); 


但 是 要 注意 的 是 ， 安 卓 系统 并 不 提供 对 duration 属性 的 支持 ， 因 此 PhoneGap 将 会 根据 系统 提 
供 一 个 默认 的 采集 时 间 ， 然 后 开发 者 可 以 通过 设置 limit 属性 的 值 来 变相 地 改变 采集 时 间 。iOS 系 
统 则 不 提供 对 limit 属性 的 支持 ， 使 得 采集 的 文件 数量 仅 能 为 1， 所 以 可 忽略 这 个 参数 。 

对 音频 采集 成 功 之 后 ， 就 进入 到 了 函数 captureSuccess 之 中 ， 系 统 会 自动 将 采集 到 的 数据 存 
入 一 组 mediaFiles 类 型 的 对 象 ， 它 封装 了 采集 到 的 媒体 文件 的 一 系列 属性 ， 如 表 12.2 所 示 。 


表 12.2 mediaFiles 中 的 属性 


eR 


文件 最 后 被 修改 的 时 间 ， 即 采集 完成 的 时 间 
所 十 二 文件 的 大 小 


这 时 传递 到 captureSuccess 之 中 的 参数 ， 并 不 是 一 个 单一 的 对 象 而 是 一 个 数组 ， 因 为 limit 属 
性 存在 的 原因 ， 被 采集 记录 下 来 的 文件 不 止 有 一 个 ， 因 此 需要 用 数组 来 保存 它们 。 


芒 在 论坛 上 有 网 友 曾 经 反应 过 不 知道 该 如 何 使 用 采集 来 的 数据 ， 因 为 在 官方 文档 中 没有 这 方面 

| 的 介绍 。 其 实 这 个 问题 非常 简单 ， 只 要 在 HTML 的 对 象 中 引入 被 采集 的 资源 就 可 以 了 ， 比 如 

| 前 面 介绍 到 的 音频 文件 就 可 以 直接 使 用 <audio src="song.wav" controls="controls"> 这 样 的 方式 
来 使 用 ， 而 获取 资源 的 方法 则 是 采用 mediaFiles 中 的 follpath 来 实现 。 


本 节 的 最 后 总 结 一 下 Capture 中 对 音频 的 采集 与 Media 对 象 中 录制 声音 的 区 别 。 

首先 ， 在 Media 对 象 中 录制 的 音频 仅 能 播放 ， 而 无 法 像 Capture 中 一 样 作 为 文件 被 保存 下 来 ， 
更 别 说 是 上 传 了 。 其 次 ，Media 对 象 录制 的 音频 可 以 选择 随时 结束 录制 ， 而 Capture 则 必须 提前 设 
定好 录制 的 时 间 。 比 如 要 做 微 信 这 样 可 以 将 声音 进行 传递 的 应 用 ， 使 用 Capture 对 象 会 比较 方便 
进行 上 传 ， 而 如 果 是 简单 的 录音 回放 ， 比 如 学 习 英 语 纠正 发 音 的 应 用 , 则 更 适合 使 用 Media 对 象 。 


] 2 e 3 使 用 Capture 采集 图 像 信息 


-六 吉 
部 


就 是 常 说 的 拍照 。 除 了 实现 将 采集 到 的 图 像 上 传 到 服务 器 之 外 ， 本 节 的 范例 中 还 要 展示 如 何 将 采 


乐 见 的 
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集 到 的 图 像 显 示 出 来 ， 具 体 实现 方法 如 下 所 示 。 


METrE 章 PhoneGap 中 的 多 媒体 控制 


构建 跨 平台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


运行 后 的 界面 如 图 12.8 所 示 其 中 上 方 PhoneGap 的 Logo 是 打包 在 asseywww 目录 下 的 图 片 
phonegap.jpg。 点 击 屏幕 下 方 的 “采集 ”按钮 ， 系 统 会 跳 转 到 拍照 界面 , 利用 摄像 头 采 集 图 像 信息 
并 上 传 ， 最 终 显示 在 原本 PhoneGap Logo 的 位 置 ， 如 图 12.9 所 示 。 


| 在 进行 此 范例 的 调试 时 ， 为 了 方便 对 摄像 头 的 调用 可 以 采用 真 机 测试 。 当 然 在 4.0 版 本 之 后 
的 ADT (Android Develop Tools) 中 ， 默 认可 以 使 用 电脑 的 摄像 头 来 虚拟 手机 等 设备 的 摄像 
| 头 。 这 里 ， 笔 者 使 用 了 真 机 拍摄 的 自己 书桌 一 角 。 


该 范例 所 使 用 的 方法 与 获取 音频 的 案例 极其 的 类 似 ， 因 此 这 里 也 就 不 再 对 范例 的 内 容 做 过 多 
的 讲解 ， 唯 一 新 加 入 的 内 容 是 ， 在 代码 第 19 行 中 将 获得 的 图 片 路 径 加 入 到 HTML 页 面 的 img 标 
签 中 去 ， 与 在 JavaScript 中 的 使 用 方法 几乎 一 致 。 与 之 类 似 的 是 ， 在 下 一 节 中 将 要 采集 的 视频 文 
件 ， 也 可 以 用 类 似 的 方式 展示 在 页 面 上 。 

另外 ， 在 实际 操作 中 ， 点 击 “ 采 集 ” 按 钮 之 后 ， 手 机 将 会 先 跳 转 到 拍照 的 页 面 ， 点 下 拍照 后 
才 会 再 跳 回 如 图 12.9 所 示 的 界面 ， 包 括 在 下 一 节 中 要 介绍 的 视频 采集 也 有 类 似 的 缺陷 。 

相信 读者 都 玩 过 人 人 网 或 者 是 QQ 空间 。 手 机 版 的 人 人 网 和 QQ 空间 都 有 一 个 “拍照 上 传 ” 
的 功能 就 可 以 这 样 实现 。 


PhoneGap 


图 12.8 范例 运行 后 的 界面 图 12.9 采集 到 的 图 像 在 屏幕 上 被 显示 出 来 


在 对 声音 进行 采集 时 ， 使 用 了 一 个 用 来 设置 采集 参数 的 CaptureAudioOptions 对 象 ,在 实现 对 
图 片 的 采集 功能 时 ， 同 样 也 会 用 到 一 个 类 似 的 参数 ， 那 就 是 CaptureImageOptions， 它 的 属性 如 表 
12.3 所 示 。 


表 12.3 CapturelmageOptions 中 的 属性 


limit 采集 图 片 的 数量 


in 采集 图 片 保存 的 格式 | 
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1 人 之. 全。 使 用 采集 视频 信息 


介绍 完了 PhoneGap 对 音频 和 图 像 文件 的 采集 后 ， 本 节 继 续 介绍 Capture 的 最 后 一 个 功能 ， 即 
对 视频 的 采集 。 下 面 是 采集 视频 并 将 视频 发 送 到 服务 器 的 一 个 例子 。 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


运行 后 结果 如 图 12.10 所 示 ， 点 击 屏幕 项 部 的 “采集 ”按钮 ， 可 以 跳 转 到 录像 界面 开始 视频 
的 采集 ， 之 后 可 以 看 到 “上 传 成 功 ”的 提示 。 


图 12.10 ”范例 运行 后 的 界面 


第 12 章 “PhoneGap 中 的 多 媒体 控制 


与 图 像 采集 功能 类 似 ， 该 功能 在 进行 一 些 传统 摄像 应 用 的 开发 时 会 显得 非常 无 力 。 但 是 在 进 
行 一 些 社交 应 用 的 开发 时 ,比如 类 似 微 信 对 讲 功 能 的 视频 对 讲 器 或 者 上 传 视频 等 , 也 还 是 不 错 的 。 

范例 第 11 行使 用 参数 CaptureVideoOptions 对 视频 的 采集 进行 设置 ， 它 的 各 项 属性 与 
CaptureAudioOptions 相同 ， 因 此 可 参考 表 12.1 的 内 容 。 


1〗2 .5 实战 : 手机 上 的 录音 机 


本 章 已 经 学 习 了 利用 PhoneGap 进行 音频 处 理 的 一 些 方法 ， 尤 其 是 12.1.5 小 节 中 还 用 一 个 比 
较 复杂 的 例子 演示 了 获取 和 显示 播放 进度 的 方法 。 但 是 本 章 给 出 的 例子 , 为 了 便于 读者 快速 学 习 ， 
都 设计 得 过 于 粗糙 ， 整 个 界面 上 就 只 有 几 行 简单 的 文字 ， 不 像 一 个 正式 的 产品 。 本 节 将 做 一 个 比 
较 复杂 的 实战 ， 来 实现 录音 机 APP。 


12.5.1 ”需求 分 析 


本 节 的 例子 会 比较 复杂 ， 但 是 由 于 篇 幅 限 制 仍然 不 会 加 入 新 的 知识 ， 主 要 是 实现 录音 和 播放 
的 功能 ， 并 将 这 一 功能 在 一 套 完整 的 界面 中 实现 。 为 了 拥有 更 好 的 视觉 效果 ， 在 本 节 例子 中 将 为 
放 音 功能 加 入 进度 条 的 视觉 效果 ， 而 录音 功能 也 要 加 入 一 个 简单 的 计时 功能 。 

本 例 所 使 用 的 界面 结构 如 图 12.11 所 示 。 


1.345/1.876 


图 12.11 录音 机 的 界面 设计 
由 于 界面 比较 简单 且 没 有 专职 的 美工 ， 为 了 达到 “美化 ”的 效果 ， 在 配色 上 就 需要 用 一 些 有 
强 对 比 度 的 颜色 ,比如 全 黑 背 景 加 上 亮度 较 高 的 绿色 或 者 蓝 色 (黑客 帝国 数字 雨 的 那 种 配色 )。 虽 
然 一 直 有 开发 者 抱怨 这 样 的 方案 会 显得 非常 山寨 、 非 常 低级 ， 但 不 得 不 说 在 缺少 全 职 美工 又 没有 
UI 素材 可 用 时 ， 这 是 最 好 的 方案 了 。 
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由 于 使 用 太 多 素材 不 便于 读者 学 习 ， 因 此 在 范例 中 笔者 会 尽量 不 使 用 图 片 等 素材 ， 保 证 将 最 
基础 的 内 容 展 现 给 读者 。 在 实际 开发 中 ,即使 没有 美工 ,也 有 许多 UI 插件 (比如 jQuery Mobile) 
可 以 供 个 人 开发 者 使 用 ,使 得 没有 美工 基础 的 开发 者 也 能 做 出 不 错 的 界面 。 


程序 运行 后 ， 可 以 点 击 “ 录 音 ” 按 钮 对 声音 进行 录制 。 此 时 ， 该 按钮 上 的 “录音 ”字样 变 为 
“停止 ” 界面 上 方 将 会 播放 动画 代表 录音 正在 进行 中 , 进度 条 上 方 的 时 间 标 签 显示 录音 时 间 。 当 


录音 完成 后 ， 点 击 “ 停 止 ”录音 结束 。 
“播放 ”按钮 也 是 同 理 ， 而 且 随 着 播放 的 进行 ， 屏 幕 中 央 的 进度 条 也 会 随 之 变化 来 响应 播放 


的 进度 。 


12.5.2 ”界面 实现 


准备 一 张 图 片 ， 长 宽 均 为 160 像素 ， 背 景 透 明 ， 如 图 12.12 所 示 作为 项 部 “播放 ”动画 效果 
的 原形 素材 ， 命 名 为 rec.png。 新 建 一 个 文件 命名 为 index.html， 具 体内 容 如 下 所 示 。 
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再 新 建 一 个 文件 style.css， 内 容 如 下 : 


构建 跨 平台 APP: HTML 5 + PhoneGap 移动 应 用 实战 】 


【 第 人 忆 章 PhoneGap 中 的 多 媒体 控制 


float:left; 
border:3px solid #00ff00; 
border-radius:15px; 
-webkit-border-radius:15px; 
font-size:26px; 
color:#00ff£00; 
text-align:center; 
line-height:40px; 
} 
/** 右 侧 的 按钮 **/ 
#button right 
{ 
width:134px; 
height :40px; 
float:left; 
border:3px solid #00ff00; 
margin-left:20px; 
border-radius:15px; 
-webkit-border-radius:15px; 
font-size:26px; 
color:#00f£f£00; 
text-align:center; 
line-height:40px; 
} 


运行 之 后 的 效果 如 图 12.12 所 示 。 


图 12.12 实现 后 的 界面 效果 
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在 实际 使 用 时 ， 项 部 胶带 轮 盘 的 图 片 是 可 以 转动 的 ， 从 而 形成 一 种 正在 进行 播放 或 者 是 录音 
的 状态 效果 ， 底 部 的 进度 条 以 及 按钮 上 的 字样 也 是 根据 当前 应 用 的 状态 自行 改变 的 。 

在 本 应 用 项 目 中 ， 大 致 分 为 以 下 几 个 状态 : 

。 未 录音 应 用 处 于 运行 状态 但 是 未 进行 “录音 ”操作 。 两 按钮 内 容 分 别 为 “录音 ”和 “ 播 
放 ”， 由 于 未 进行 录音 操 作 ， “播放 ”功能 不 可 用 . 

。 录音 中 : 应 用 处 于 运行 状态 ， 正 在 进行 录音 。 两 按钮 内 容 分 别 为 “停止 ”和 “播放 ”， 顶 
部 胶带 轮 盘 转动 ， “播放 ”功能 不 可 用 。 

。 录音 完成 : 应 用 处 于 运行 状态 ， 已 经 结束 录音 。 两 按钮 内 容 分 别 为 “录音 ”和 “播放 ”， 
顶部 胶带 轮 盘 衣 止 ， 由 于 已 完成 录音 操作 ，“ 录 音 ” 功 能 不 可 用 ， “播放 ”功能 可 用 。 

。 播放 中 : 应 用 处 于 运行 状态 ， 已 经 完成 录音 . 两 按钮 内 容 分 别 为 “录音 ”和 “暂停 ”， 顶 
部 胶带 轮 盘 转动 ， 由 于 已 经 完成 了 录音 操作 ，“ 录 音 ”功能 不 可 用 ， “播放 ”功能 可 用 ， 

。 暂停 中 : 应 用 处 于 运行 状态 ， 播 放声 音 被 暂停 。 两 按钮 内 容 分 别 为 “录音 ”和 “播放 ” 且 
“录音 ”功能 不 可 用 。 

。 播放 完成: 应 用 处 于 运行 状态 ， 播 放声 音 完成 。 两 按钮 分 别 为 “录音 ”和 “播放 ”， 点 击 
“播放 ” 按 锯 将 重新 播放 声音 。 


在 下 一 小 节 中 ， 将 根据 以 上 6 个 状态 来 为 界面 加 入 交互 。 


12.5.3 ”界面 交互 的 实现 


根据 上 一 节 列 出 的 6 个 状态 ， 需 要 分 别 实现 两 个 按钮 被 点 击 时 的 响应 函数 onRecording0 和 
onRecordPlay0。 此 外 还 需要 控制 项 部 胶带 轮 盘 图 片 转动 和 静止 的 函数 recordRun0 和 recordStop0， 
以 及 设置 播放 进度 和 录音 时 间 的 函数 setBar0 和 setTime()。 

新 建文 件 dojs 并 在 index.html 的 第 7 行 插入 代码 引入 JS 脚本 文件 : 


其 中 的 具体 内 容 如 下 : 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


在 代码 第 1 行 声明 了 一 个 变量 applicationStatus， 用 它 的 值 来 记录 当前 录音 或 者 是 播放 的 状 
态 ， 在 函数 onRecording0 (第 26~45 行 ) 和 函数 onRecordPlay0 (第 47~77 行 ) 中 都 是 依靠 此 变 
量 来 判断 接 下 来 要 进行 何 种 操作 的 。 

第 3 行 中 的 变量 angle 用 来 记录 胶带 转盘 转动 的 角度 ， 在 第 15~20 行 的 函数 changeAngle0 中 
对 它 进 行 引用 。 该 函数 每 运行 一 次 ， 胶 带 转盘 都 会 转动 1 度 ， 由 于 setmterval0) 的 作用 ， 只 要 不 对 
它 进行 停止 操作 ， 胶 带 转盘 将 一 直 转动 下 去 。 


可 以 通过 修改 setInterval0 的 时 间 参 数 来 设置 转盘 转动 的 速度 。 通 过 动画 来 向 用 户 展示 应 用 所 
处 的 状态 是 一 种 非常 常用 而 且 能 有 效 提升 用 户 体验 的 方法 。 在 实际 开发 中 还 可 设置 在 录音 和 
放 音 时 转盘 分 别 向 不 同 的 方向 转动 来 加 以 区 分 。 


第 79~87 行 中 定义 了 两 个 函数 ， 分 别 用 来 在 录制 声音 和 播放 时 设置 进度 条 的 进度 ， 由 于 在 录 
制 声音 时 ， 根 本 不 知道 要 录制 多 久 , 因此 也 无 法 使 用 进度 条 ， 只 能 利用 数字 显示 已 经 录制 的 秒 数 。 
当 声 音 被 播放 时 , 则 可 以 利用 Media 对 象 获取 音频 的 总 长 度 和 当前 播放 进度 。 而 之 前 的 index.html 
文件 中 ，id 值 为 bar 的 div 元 素 被 加 入 了 绿色 的 背景 ， 通 过 调整 它 的 宽度 就 可 以 形成 进度 条 一 点 
一 点 增长 的 效果 了 。 

此 外 , 目前 一 些 函数 还 没有 完成 , 比如 onRecordPlay() 和 onRecording0 还 没有 开始 对 PhoneGap 
播放 和 录制 声音 的 方法 加 以 调用 ， 这 些 在 下 一 小 节 中 将 会 补充 完整 。 


12.5.4 ”录音 和 播放 功能 的 实现 


上 一 小 节 已 经 实现 了 该 项 目的 界面 以 及 交互 功能 ， 本 小 节 我 们 继续 实现 最 核心 的 录音 和 播放 
功能 。 观 察 10.5.2 节 的 第 一 段 代 码 ， 会 发 现 第 10 行 有 一 句 :“/ 此 处 加 入 JavaScript 代码 ” 原来 
笔者 早 就 做 出 了 准备 。 

本 小 节 就 要 在 这 个 位 置 插入 用 来 实现 录音 以 及 播放 功能 的 函数 ， 如 下 所 示 。 
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至 此 ， 该 应 用 所 需要 的 录音 和 播放 功能 也 已 经 实现 了 ， 代 码 中 新 定义 了 4 个 变量 ， 它 们 的 作 
用 可 以 根据 代码 中 的 注释 进行 理解 (第 1~8 行 )。 然 后 分 别 定义 了 用 来 实现 对 音频 进行 录制 、 结 
束 录 制 、 播 放 和 和 暂停 的 函数 ， 在 这 些 函 数 中 会 用 到 新 定义 的 这 4 个 变量 。 


由 于 变量 作用 域 的 关系 ， 这 些 变量 必须 在 函数 外 进行 定义 。 


至 于 具体 的 内 容 在 本 章 之 前 几 节 中 都 已 经 有 过 介绍 ,希望 读者 根据 注释 自行 理解 代码 的 内 容 
也 当 作 是 一 种 复习 。 


12.5.5 ”完整 的 案例 呈现 


也 许 有 性 急 的 读者 已 经 迫不及待 的 将 程序 敲 好 ， 放 在 虚拟 机 或 者 实体 机 中 去 运行 了 ， 却 发 现 
完全 无 法 录音 和 放 音 。 当 年 笔者 照 着 书 自学 数据 结构 时 也 遇 到 过 这 样 的 粮 事 ， 代 码 都 敲 进去 了 ， 
可 是 Visual C++ 就 是 一 个 劲 地 报错 。 虽 然 各 个 功能 需要 的 函数 都 写 好 了 ， 可 是 没 经 过 组 合 又 怎么 
能 发 挥 作用 呢 ? 

所 以 尽管 心急 ， 还 是 要 老 老 实 实 的 回 到 代码 中 ， 对 dojs 做 一 些 简单 的 修改 。 这 次 修改 主要 是 
针对 onRecording0 和 onRecordPlay0 两 个 函数 进行 的 。 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


在 范例 的 第 11、19、35、43、52 和 59 行 分 别 加 入 了 录音 和 播放 功能 的 函数 ， 使 得 整个 程序 
完整 了 起 来 ， 再 运行 就 能 够 实现 最 初 设 计 的 功能 了 。 


也 许 有 读者 认为 按照 笔者 最 初 介绍 的 PhoneGap 知识 点 时 采用 的 习惯 ， 应 该 先 写 好 PhoneGap 
相关 的 函数 〈 比 如 本 章 介绍 的 录音 和 播放 功能 的 框架 ) 才 对 。 但 是 在 实际 开发 中 ， 这 种 想法 
却 是 不 合适 的 。 虽 然 使 用 PhoneGap， 无 论 是 编译 还 是 调试 都 非常 方便 ， 但 是 毕竟 不 如 在 浏览 


器 中 直接 测试 来 的 方便 。 因 此 在 开发 “大 型 项 目 ” 时 ， 应 将 程序 本 身 界面 以 及 交互 所 需要 的 
函数 完成 ， 并 在 本 机 浏览 器 上 测试 通过 ， 之 后 再 去 考虑 具体 功能 的 实现 。 这 样 才 能 保证 会 有 
最 高 的 生产 效率 。 


虽然 这 个 “录音 机 ”已 经 可 以 使 用 了 ， 但 它 还 只 是 一 个 模型 ， 有 许多 不 完善 的 地 方 ， 比 如 它 
只 能 录制 一 段 声音 并 且 没 有 保存 的 功能 ， 读 者 可 以 逐渐 将 其 完善 起 来 。 


12.6 4 千 


本 章 学 习 了 使 用 PhoneGap 中 的 Media 和 Capture 对 声音 媒体 文件 进行 操作 的 方法 , 并 实现 了 
一 个 简单 的 录音 机 应 用 。 通 过 本 章 的 学 习 ， 读 者 应 该 已 经 有 能 力 去 独立 实现 一 些 类 似 的 应 用 ， 比 
如 网 络 播放 器 、 录音 机 等 等 。 但 是 , 许多 知识 却 并 不 是 仅 靠 一 本 书 就 能 介绍 清楚 的 ， 比 如 release0 
方法 的 使 用 以 及 媒体 文件 对 设备 硬件 的 占用 等 ， 这 都 需要 在 实际 的 开发 中 去 体会 。 
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对 本 地 存储 功能 的 支持 是 HTML 5 的 一 大 进步 ， 同 样 在 PhoneGap 中 也 没有 忽略 这 一 功能 。 在 
PhoneGap 中 ，Storage 类 基于 W3C Web SQL Database Specification 提供 了 设备 对 本 地 存储 的 访问 。 
在 许多 设备 中 ， 这 些 功 能 都 是 使 用 HTML 5 的 本 地 存储 功能 来 实现 的 ， 只 有 少数 设备 由 于 不 能 很 
好 地 支持 HTML 5 的 一 些 属性 ， 而 不 得 不 靠 一 些 底层 的 功能 来 实现 。 


本 章 主要 内 容 包 括 : 

复习 HTML 5 中 的 本 地 存储 功能 
学 习 PhoneGap 中 的 本 地 存储 功能 
掌握 PhoneGap 对 数据 库 的 操作 
掌握 键 值 对 的 保存 方法 


本 .1 手机 上 可 以 使 用 的 本 地 存储 


读者 学 到 这 里 ， 已 经 明白 了 在 一 个 移动 APP 中 ，PhoneGap 主要 用 来 调用 移动 设备 底层 的 一 
些 功能 ， 如 摄像 图 、 录 音程 序 等 ， 而 HTML 5 主要 实现 一 些 页 面 级 别 的 应 用 。 两 者 都 提供 了 存储 
功能 ， 具 体 如 何 选 择 ， 本 节 通 过 对 比 两 者 的 使 用 情况 来 分 析 。 
13.1.1 HTML 5 中 的 本 地 存储 

第 6 章 我 们 学 习 过 HTML 5 中 的 本 地 存储 ， 现 在 我 们 通过 一 个 例子 来 回顾 下 。 
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将 页 面 保存 为 localStorage.html 并 运行 ， 用 鼠标 单 击 屏幕 左上 角 的 红色 方块 ， 即 可 弹出 对 话 
框 显示 该 页 面 被 访问 的 次 数 ， 以 及 之 前 访问 该 页 面 的 时 间 信 息 ， 如 图 13.1 所 示 。 


Fefox > 


S$)@fie/c OO 人 ”cI 图 -5P| 四 | 上 四- 会- 
园 访问 最 多 火狐 方 站 点 站 新 手 上 路 | 】 党 用 网 址 四 淘 主 特 夫 


你 访问 了 本 页 面 ?次 您 上 一 次 访问 和 对 间 是 Men 
Mar 10 2014 21:18:24 GMXT+0800 


时 中古 耻 间 2 
图 13.1 之 前 对 该 页 面 的 访问 被 记录 了 下 来 


本 例 使 用 了 HTML 5 中 的 localStorage0 方 法 ， 在 HTML 5 标准 中 提供 了 两 种 可 以 实现 本 地 存 
储 的 方法 localStorage 和 sessionStorage。 其 中 localStorage 的 存储 是 永久 性 的 ， 而 sessionStorage 
存储 的 内 容 则 会 在 浏览 器 关闭 后 被 全 部 清除 。 在 具体 用 法 上 它们 两 个 没有 太 大 区 别 ， 只 需要 为 
localStorage 或 者 sessionStorage 加 入 属性 即 可 ， 如 范例 第 23 行 所 示 。 

在 一 些 基于 HTML 5 的 应 用 中 ， 就 可 以 使 用 类 似 的 方法 ， 在 本 地 存储 一 些 数据 以 避免 重复 下 
载 。 此 外 ， 一 些 聊天 记录 ， 甚 至 是 利用 PhoneGap 来 做 一 款 号 码 本 或 便签 ， 都 可 以 用 类 似 的 方法 
来 实现 存储 。 
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13.1.2 “PhoneGap 中 的 本 地 存储 功能 


上 一 小 节 介绍 了 HTML 5 中 的 本 地 存储 功能 ,那么 在 PhoneGap 中 的 本 地 存储 又 是 什么 样 呢 ? 
与 上 一 小 节 介绍 的 内 容 又 有 什么 联系 ? 这 些 都 是 在 本 节 中 要 解决 的 问题 。 
PhoneGap 的 本 地 存储 功能 被 设计 成 以 键 值 对 的 形式 来 永久 性 地 保存 数据 ， 比 如 以 下 代码 : 


当 开发 者 想 要 使 用 被 存储 的 数据 时 ， 就 可 以 使 用 以 下 代码 来 调用 : 


而 这 种 方法 正 是 IndexedDB 标准 所 推崇 的 。 


加 本 者 可 能 不 理解 什 和 是 链 信 对 ， 举 个 例子 吧 。 如 果 有 一 个 表格 ， 内 容 如 图 132 所 示 ， 于 
么 表格 中 每 一 项 的 列 名 与 它 唯一 对 应 的 内 容 就 组 成 了 一 对 键 值 对 。 比 如 周一 对 应 的 是 名 头 。 


Ey Ea EE 3 


13.2 周一 到 周 五 的 早饭 构成 的 键 值 对 


此 外 , PhoneGap 的 存储 API 中 还 提供 了 一 个 简单 的 数据 库 , 这 显然 是 受到 Web SQL Database 
的 影响 。 虽 然 说 目前 没有 一 种 通用 的 SQL 语言 ， 但 是 由 于 在 移动 设备 中 普遍 预 装 的 仅仅 是 一 个 
SQLLite， 因 此 可 以 将 SQLLite SQL 的 语法 作为 在 PhoneGap 中 使 用 SQL 语言 的 标准 。 

在 实际 操作 中 可 以 采用 如 下 的 方法 来 新 建 一 个 数据 库 : 


之 后 就 可 以 像 操作 SQL 一 样 对 数据 库 进行 操作 ， 比 如 : 


当然 实际 使 用 时 比 现在 所 介绍 的 内 容 要 复杂 得 多 ， 不 过 这 并 不 影响 它 的 便利 性 ， 甚 至 可 以 说 
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PhoneGap 中 的 本 地 存储 功能 是 它 最 常用 也 是 最 好 用 的 一 组 API。 


13.2 PhoneGap 对 数据 库 的 操作 


前 面 分 析 过 PhoneGap 提供 的 本 地 存储 功能 ， 其 中 重点 说 明了 数据 库存 储 方式 ， 本 节 介绍 一 
下 如 何 使 用 PhoneGap 中 的 数据 库 操作 。 


13.2.1 数据 库 的 使 用 


上 一 节 已 经 介绍 过 ， 开 发 者 可 以 在 PhoneGap 中 以 SQLite SQL 的 语法 来 进行 数据 操作 ,在 进 
行 这 些 操作 时 ， 需 要 有 一 个 数据 库 来 提供 操作 的 基础 ， 这 就 是 本 节 将 要 介绍 的 Database 对 象 。 

Database 对 象 为 开发 者 提供 了 对 数据 库 进 行 操作 的 可 能 ， 可 以 简单 地 理解 为 一 个 Database 就 
是 一 个 可 以 被 操作 的 数据 库 实体 。 它 包含 了 两 种 方法 : transaction 和 changeVersion, 其 中 transaction 
非常 常用 ， 一 般 通过 它 来 执行 一 些 语 句 ， 比 如 数据 库 的 创建 和 数据 的 插入 ，changeVersion() 方 法 
一 般 不 会 被 用 到 ， 它 用 来 实现 对 数据 库 版 本 号 的 查询 。 

但 是 要 怎样 才能 获得 一 个 Database 对 象 呢 ? 可 以 使 用 Storage 对 象 中 的 openDatabase() 方 法 实 
现 。 具 体 方法 在 上 一 节 中 已 经 介绍 过 ， 如 下 所 示 : 


| 注意 不 是 createDatabae 而 是 openDatabase， 它 的 作用 是 创建 并 返回 一 个 新 的 Database 对 象 ， | 
不 过 当 要 被 创建 的 数据 库 已 经 存在 时 ， 它 还 会 执行 打开 数据 的 操作 。 


在 打开 了 数据 库 之 后 要 对 它 进行 一 些 查询 或 更 新 的 操作 Database 对 象 使 用 方法 transaction() 
来 完成 这 些 操作 ， 具 体 方法 如 下 : 


该 方法 中 要 执行 的 操作 又 牵扯 到 了 一 个 新 的 对 象 ， 那 就 是 SQLTransaction 对 象 ， 它 包含 了 允 
许 用 户 对 数据 库 进行 操作 的 方法 executeSql0)。 通 过 executeSql() 方 法 ， 用 户 可 以 在 设备 上 直接 执 
行 一 条 或 者 多 条 SQL 语句 。 下 面 给 出 一 个 利用 这 个 方法 来 对 数据 库 进行 操作 的 例子 。 
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编译 之 后 运行 结果 如 图 13.3 所 示 。 


http://192.168.1.106 
数据 库 操作 失败 could not execute 
due to a constaint failure 

{19 column id is not unique) 


OK 


13.3 运行 之 后 的 结果 竟然 是 发 生 了 错误 


没有 想到 ， 运 行 之 后 的 范例 竟然 发 生 了 错误 ， 不 要 紧张 ， 这 个 错误 是 为 了 引出 另 一 个 对 象 而 
特意 留 下 的 。 这 就 是 SQLError 对 象 , 它 用 来 在 数据 库 操作 错误 时 记录 错误 的 原因 ， 它 所 包含 的 错 
误 类 型 如 表 13.1 所 示 。 


表 13.1 SQLError 对 象 中 记录 的 错误 类 型 


DATABASE ERR 


QUOTA ERR 超出 数据 配额 
SYNTAX ERR 语法 错误 
CONSTRAINT ERR 约束 错误 
TIMEOUT ERR 超时 


本 范例 出 现 的 错误 类 型 被 默认 作为 自 定义 函数 error 的 参数 传递 了 下 来 ， 如 范例 第 32 行 的 参 
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数 和 第 33 行 的 errmessage。 那 么 这 到 底 是 一 种 什么 错误 呢 ? 

观察 范例 的 第 22 行 有 一 段 “id unique” 这 样 的 内 容 ， 也 就 是 说 ， 新 插入 的 内 容 中 id 的 值 必须 
是 唯一 的 ， 而 在 范例 的 26 行 和 28 行 中 连续 两 次 插入 了 id 为 2 的 内 容 ， 因 此 造成 了 数据 插入 的 错 
误 。 将 第 28 行 删除 后 ， 运 行 结果 如 图 13.4 所 示 。 


http://192.168.1.106 
数据 库 操作 成 功 
OK 


图 13.4 ”最终 运行 成 功 的 结果 


主人 说 sQLEmor 对 尔 能 够 对 出 现 的 错误 进行 信息 提示 , 但 是 一 些 本 身 操作 上 的 错误 确实 无 法 


识别 ， 就 好 像 汽 车 上 的 自动 导航 会 在 你 偏离 目标 路 线 时 给 你 提示 ， 但 当 你 设 定 了 错误 的 目标 
后 自动 导航 是 无 法 判断 的 。 因 此 该 对 象 有 时 会 给 出 undefined 这 种 错误 类 型 。 


接 下 来 ， 我 们 需要 了 解 一 下 SQL 语句 究竟 是 怎样 被 执行 的 呢 ? 通过 范例 的 第 19~28 行 也 许 
能 找到 一 些 答案 。 


可 以 看 到 SQL 语句 被 包含 在 一 个 名 为 executeSql() 的 方法 中 ， 这 正 是 执行 SQL 语句 时 所 使 用 
的 方法 。 但 是 前 面 那 个 tx 又 是 什么 呢 ? 

其 实 这 个 对 象 在 之 前 已 经 介绍 过 了 ， 那 就 是 SQLTransaction， 它 被 当 作 参 数 传递 到 了 
populateDB 中 ， 如 范例 第 18 行 ， 这 样 就 可 以 利用 SQL 语句 来 实现 对 数据 库 的 操作 了 。 
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13.2.2 ”数据 库 内 容 的 读 取 


上 一 节 介绍 了 PhoneGap 中 对 数据 库 进 行 操作 的 方法 , 但 是 不 知道 读者 有 没有 产生 一 个 疑问 。 
数据 库 主 要 实现 对 数据 的 增 、 删 、 改 、 查 等 操作 ， 增 和 删 的 功能 都 实现 了 ， 想 必 改 也 是 不 难 的 ， 
可 是 查询 到 的 数据 要 怎样 使 用 呢 ? 这 将 是 本 小 节 中 要 介绍 的 内 容 。 

我 们 知道 从 数据 库 中 查询 的 内 容 ， 需 要 有 相应 的 “容器 ”来 盛 放 它们 ， 这 个 “容器 ”就 是 
SQLResultSet 对 象 。 下 面 的 例子 展示 了 一 种 对 数据 库 中 内 容 进行 查询 的 方法 。 
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运行 之 后 的 结果 如 图 13.5 所 示 , 可 以 看 到 在 范例 的 第 17~21 行 中 被 插入 的 数据 已 经 全 部 被 读 
取 并 显示 出 来 了 。 


http://192.168.1.106 
共有 : 3 条 记录 ,分 别 是 
行 数 为 01D ; 1 内 容 First data 
行 数 为 1ID : 2 内 容 Second data 
行 数 为 21D ; 999 内 容 so many data 


OK 


图 13.5 使 用 SQLResultSet 对 象 读 出 了 数据 库 中 的 内 容 


接 下 来 就 要 看 看 这 到 底 是 怎么 实现 的 , 在 范例 的 第 63 行 开始 执行 对 数据 库 的 操作 , 而 在 它 的 
回调 函数 success 中 却 比 13.2.1 小 节 的 同名 函数 中 多 加 入 了 一 些 新 内 容 ( 见 第 55、56 行 处 )。 
首先 使 用 openDatabase() 打 开 了 名 为 Database 的 数据 库 ， 由 于 该 数据 在 第 61 行 中 已 经 被 创建 
(按照 执行 顺序 应 当先 执行 61 行 处 的 openDatabase() 方 法 )， 因 此 此 处 openDatabase() 方 法 的 作用 
是 打开 一 个 已 有 的 数据 库 ， 然 后 再 对 它 进行 操作 (第 56 行 )。 
新 的 操作 在 自 定义 函数 querydb 第 24~27 行 ) 中 被 执行 ， 它 所 执行 的 只 有 一 条 SQL 语句 : 


即 查询 表 MYDEMO 中 的 全 部 内 容 。 该 方法 声明 了 两 个 回调 函数 ， 当 SQL 语句 被 执行 成 功 
时 ， 将 会 进入 函数 querySuccess 之 中 ， 同 时 也 会 将 一 个 类 行为 SQLResultSet 的 对 象 传 入 其 中 。 它 
所 包含 的 属性 如 表 13.2 所 示 。 


表 13.2 SQLResultSet 类 中 的 属性 


属性 名 称 说 明 
| insera 数据 库 中 记录 的 这 


| 
| ed SQL 语句 执行 后 所 作用 到 的 记录 的 条 数 | 
| 这 是 一 个 SQLResultSetRowList 类 型 的 对 象 ， 包 含 了 读 操作 中 获取 的 记录 内 容 | 
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范例 第 33 行 就 利用 了 SQLResultSet 对 象 中 rows 对 象 的 length 属性 来 返回 数据 库 中 记录 的 条 
数 。 既 然 已 经 提 到 了 rows， 那 么 就 有 必要 再 介绍 一 下 SQLResultSetRowList 类 ， 它 的 结构 比较 简 
单 ， 除 了 已 经 使 用 过 的 length 之 外 ， 就 只 有 一 个 名 为 item 的 数组 对 象 ， 其 中 包含 了 数据 库 中 每 条 
记录 的 值 。 如 范例 第 39~43 行 就 是 它 的 使 用 方法 。 


虽然 本 地 数据 库 的 使 用 大 大 地 方便 了 开发 者 ， 但 是 由 于 SQLLite 本 身 的 局 限 性 导致 了 本 地 存 
储 功能 的 不 够 强大 ， 比 如 无 法 支持 正则 表达 式 、 不 能 支持 多 表 查 询 等 。 希 望 PhoneGap 在 今 
后 的 版 本 中 能 够 加 强 这 方面 的 支持 。 


1 了 ,也 键 值 对 的 使 用 方法 


数据 库 是 PhoneGap 本 地 存储 功能 中 最 方便 实用 的 一 种 API， 但 是 事 无 绝对 ， 在 某 些 特定 情 
况 下 它 就 未 必 是 最 方便 的 了 。 因 此 就 会 有 其 他 方法 与 它 形成 互补 。 这 就 是 PhoneGap 中 的 另 一 种 
存储 方式 : 键 值 对 。 它 的 使 用 方法 如 下 所 示 。 
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运行 之 后 的 结果 如 图 13.6 所 示 。 单 击 “ 写 入 数据 ”按钮 ， 将 会 向 key 对 应 的 键 值 对 中 写 入 内 
容 “ 本 地 存储 ”， 而 当 单 击 “ 删 除数 据 ” 按 钮 时 ， 则 会 将 本 地 存储 中 的 全 部 键 值 对 删除 。 

在 本 例 中 ， 只 有 第 10、12、23 和 25 行 是 与 本 地 存储 有 关 的 内 容 ， 因 此 将 针对 这 两 个 地 方 进 
行 讲解 。 第 10 行 和 12 行 的 作用 是 写 入 一 对 键 值 对 并 将 它 读 取出 来 。 在 写 入 键 值 对 的 时 候 按照 如 
下 格式 进行 : 


当 需 要 使 用 它 时 ， 使 用 如 下 的 方法 进行 调用 (如 范例 第 12、25 行 ): 


在 第 23 行 中 使 用 了 clear() 方 法 ， 将 全 部 键 值 对 清除 : 


通过 点 击 “ 删 除数 据 ” 按 钮 后 的 结果 可 以 看 出 ， 当 执行 了 该 方法 之 后 ，key 对 应 的 键 值 变 成 
了 null， 也 就 是 空 ， 说 明确 实 是 被 清除 了 。 

除了 clear 以 外 ， 其 实 还 有 一 种 用 来 删除 键 值 内 容 的 方法 ， 这 就 是 removeltem() 方 法 ， 用 来 实 
现 对 指定 键 值 对 的 删除 操作 ， 使 用 方法 如 下 : 
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插入 了 一 条 数据 ， 现 在 value 的 值 为 
， 现 在 value 的 值 为 : nul 
， 现 在 value 的 值 为 : 
， 现 在 value 的 值 为 : 


到 除了 一 条 数据 ; 


图 13.6 屏幕 上 部 的 显示 部 分 能 观察 key 对 应 键 值 对 的 内 容 
最 后 一 定 还 会 有 读者 觉得 使 用 键 值 对 时 ， 需 要 记录 下 每 个 键 值 对 的 键 名 非常 不 方便 ， 
PhoneGap 也 提供 了 获取 本 地 存储 中 键 名 的 方法 : 
keyName = window.localStorage.key (0); 


其 中 keyName 中 用 来 保存 获取 到 的 键 名 ， 而 最 后 那个 0 则 用 来 作为 索引 ,获取 要 使 用 被 定义 
的 第 几 组 键 值 对 的 键 名 。 


13.4 小 结 


本 章 从 HTML 5 的 本 地 存储 说 起 ， 介 绍 了 PhoneGap 中 本 地 存储 的 使 用 方法 ， 并 对 数据 库 的 
查询 和 键 值 对 的 查询 分 别 作 了 介绍 。 由 于 使 用 方法 的 不 同 导致 了 这 两 种 方法 有 着 不 同 的 特点 。 比 
如 ， 要 保存 一 系列 的 文章 或 电话 号 码 ， 那 肯定 是 数据 库 方式 比较 方便 ， 但 如 果 只 是 要 保存 一 组 数 
据 ， 那 么 自然 要 首选 键 值 对 的 方式 。 除 此 之 外 ， 还 可 以 使 用 HTML 5 本 身 的 存储 方式 。 本 章 虽 然 
内 容 不 多 ， 却 需要 读者 不 断 地 思考 ， 在 实际 应 用 中 选择 最 适合 、 最 简便 的 方式 来 处 理 数据 。 
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+ 一 个 简单 的 “今日 头条 ”新 闻 APP 、 


本 章 是 一 个 整体 的 APP 开发 , 主要 功能 是 实现 一 个 类 似 新 闻 头 条 的 APP。 由 于 本 章 所 要 实战 
的 项 目 是 一 个 APP 与 服务 器 端 交互 的 整体 , 它 也 包括 后 合 服务 器 端的 操作 , 比如 PHP 后 全 的 编写 。 
前 端 页 面 主要 由 HIML 5 和 jQuery 完成 。 


本 章 主要 内 容 包 括 : 

e 了 解 JSON 数据 的 格式 以 及 如 何 使 用 JSON 数据 
日 使 用 Ajax 获取 其 他 页 面 上 的 内 容 

。 如 何 实现 “ 跨 域 ” 读 取 其 他 页 面 上 的 内 容 

。 实现 HTML 5 新 闻 APP 


“今日 头条 ”的 功能 


本 章 所 需要 实现 的 功能 非常 简单 ， 只 需要 在 服务 端 生成 新 闻 列表 ， 然 后 在 手机 上 利用 jQuery 
的 Ajax 功能 获取 这 些 数据 ， 最 后 将 获取 的 数据 显示 出 来 。 

此 外 ， 本 项 目的 服务 端 将 采用 PHP， 因 为 PHP 的 资料 还 是 最 容易 找到 的 ， 并 且 常 用 的 CMS 
(如 织 梦 、DISCUZ、PHPCMS 等 ) 均 采 用 了 PHP， 因 此 现 阶段 对 于 个 人 开发 者 来 说 ，PHP 是 最 
合适 的 。 


“今日 头条 ”的 界面 设计 和 实现 


首先 设计 出 应 用 的 界面 ， 本 次 需要 的 界面 有 两 个 ， 分 别 是 首页 的 新 闻 列 表 和 点 开 某 个 列表 项 
之 后 显示 的 具体 新 闻 内 容 。 大 部 分 新 闻 的 界面 都 是 图 14.1 所 示 的 样子 ， 本 节 就 设计 一 个 这 样 简单 
的 “今日 头条 ”。 


一 个 简单 的 “今日 头条 ”新 闻 APP 


推荐 视频 订 闲 
京东 家 电 部 经 理 操控 中 奖 名 单 犯 职务 


侵占 罪 获 刑 


生生 


河南 小 伙 春 节 相亲 记 : 开 
宝马 5 天 相 了 25 个 | 4 


发 改 委 :今年 重点 抓 好 城 际 铁路 等 新 开 
工 项 目 ? 


中 国 房产 、 财 税 、 工 商 等 多 项 新 政 羊 年 
新 春 后 落地 


es 中 国 已 停止 干预 人 民 币 汇 


图 14.1 通用 的 新 闻 界面 


14.2.1 ”新 闻 列表 界面 的 设计 


由 于 本 章 所 展示 的 仅仅 是 一 个 例子 ， 笔 者 省 略 了 一 般 此 类 应 用 常用 的 图 片 轮 播 等 元 素 ， 仍 然 
保留 了 必 不 可 少 的 顶部 栏 。 设 计 出 的 界面 如 图 14.2 所 示 。 


应 用 标题 : 如 PhoneGap 新 闻 


图 14.2 新 闻 列表 界面 布局 
为 了 保证 显示 的 效果 ， 需 要 将 项 部 栏 固定 在 屏幕 的 底部 ， 而 中 央 的 新 闻 列 表 ， 可 以 根据 用 户 
的 需要 进行 上 下 滑动 。 
具体 实现 方法 如 以 下 代码 所 示 。 


//14-1.html 
01 <!DOCTYPE html> 
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运行 后 得 到 界面 如 图 143 所 示 。 


143 ”实现 后 的 新 闻 列表 界面 
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在 header 元 素 中 使 用 了 属性 position:fixed， 以 保证 项 部 栏 能 够 永远 固定 在 屏幕 项 部 ， 如 范例 
第 22 行 所 示 。 在 具体 的 内 容 中 ， 为 了 保证 其 中 的 列表 项 不 会 溢出 ， 就 需要 对 它 的 overflow 属性 
进行 设置 ， 如 第 15 行 所 示 。 

除 此 之 外 笔者 不 再 对 本 范例 做 过 多 介绍 ， 请 读者 根据 注释 自行 对 范例 中 的 内 容 进 行 理解 。 


14.2.2 ”新 闻 内 容 页 的 实现 


与 新 闻 列 表 的 设计 思想 相同 ， 具 体 的 新 闻 内 容 界 面 也 采取 了 尽量 简单 的 设计 思想 ， 且 在 本 范 
例 中 仅 显示 新 闻 的 题目 、 作 者 以 及 新 闻 内 容 。 此 外 为 了 保持 应 用 界面 的 一 致 性 ， 还 要 在 新 闻 内 容 
界面 中 加 入 与 新 闻 列 表 中 相同 风格 的 项 部 栏 。 为 了 保证 用 户 在 看 完 一 条 新 闻 之 后 ， 能 够 顺利 地 返 
回 新 闻 列 表 查 看 其 他 新 闻 ， 还 要 在 头 部 栏 中 加 入 一 个 “返回 ”按钮 ， 最 终 布局 如 图 14.4 所 示 。 


全 了 到" 术 包 抽 位 呈 一 直 是 和 动 开发 领域 一 个 比较 有 争议 的 问题 ， 因 为 按照 一 般 人 机 交 | 
一 互 的 理论 ， 应 当 将 操作 按钮 尽量 靠近 屏幕 的 右 下 方位 置 以 便 用 户 进行 单 手 操作 。 但 是 通过 四 
144 可 以 看 到 ， 放置“ 返回 ”按钮 的 位 置 恰恰 是 单 手 操作 虽 难 以 能 础 到 的 左上 角 。 读 者 可 以 


上 将 其 理解 为 是 为 了 防止 用 户 因为 误 触 而 有 意 为 之 ， 也 可 以 理解 为 是 习惯 所 致 j 


图 14.4 新 闻 内 容 界面 布局 
该 界面 的 具体 实现 方法 如 下 所 示 。 
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构建 跨 平台 APP， HTML 5 + PhoneGap 移动 应 用 实战 用 


所 实现 的 界面 运行 后 如 图 14.5 所 示 。 


图 14.5 ”最终 实现 的 新 闻 内 容 界 面 
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读者 可 自行 阅读 代码 进行 理解 ， 这 里 只 介绍 第 78~85 行 处 的 CSS 样式 。 因 为 有 不 少 开发 者 在 
页 面 中 实现 一 些 分 割 线 之 类 的 效果 时 都 会 采用 图 片 ， 这 样 可 能 比较 方便 。 但 是 ， 为 了 保证 页 面 的 
加 载 速度 ， 且 为 今后 的 维护 方便 考虑 ， 笔 者 建议 页 面 中 的 元 素 还 是 尽量 使 用 CSS 来 实现 。 


即使 是 彩色 线条 也 是 可 以 通过 背景 的 渐变 简单 实现 的 , 这 样 虽 然 最 初 可 能 工作 量 稍微 大 一 点 ， 
但 是 长 远 来 说 比 用 图 片 要 方便 得 多 。 


14.2.3 ”界面 的 进一步 整合 


前 面 的 内 容 已 经 实现 了 新 闻 列 表 和 新 闻 内 容 页 的 设计 ， 不 过 现在 还 有 一 个 问题 。 那 就 是 由 于 
本 项 目 使 用 PhoneGap 完成 ,因此 在 客户 端 具 有 JavaScript 脚本 可 以 使 用 , 这 就 使 得 如 何在 两 个 页 
面 间 传递 数据 成 为 了 一 个 难题 。 虽然 HTML 提供 了 window.location.search 的 方法 来 实现 在 HTML 
页 面 间 进 行 参数 传递 ， 可 这 毕竟 还 是 不 太 方便 ， 有 没有 能 够 代 蔡 它 的 方案 呢 ? 

回想 本 书 中 介绍 过 的 知识 ， 本 地 存储 也 许 是 个 不 错 的 想法 ， 可 是 其 实 还 有 更 好 的 办 法 。 因 为 
本 项 目 中 实际 上 只 有 两 个 页 面 ， 可 以 利用 JavaScript 将 它们 整合 到 一 个 页 面 中 ， 不 但 能 够 有 效 提 
高 页 面 间 切换 的 速度 ， 而 且 能 够 减少 一 些 不 必要 的 流量 浪费 。 
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构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


运行 之 后 屏幕 上 显示 首页 新 闻 列 表 界 面 ， 用 户 随意 点 击 一 条 新 闻 标题 页 面 内 容 ， 就 会 切换 到 
新 闻 内 容 界 面 ， 而 当 用 户 再 点 击 左 上 角 的 “返回 ”按钮 时 ， 界 面 则 会 返回 到 新 闻 列表 界面 中 去 。 


1 4 .了 利用 Ajax 获取 服务 器 上 的 信息 


界面 实现 之 后 ， 接 下 来 要 做 的 就 是 把 从 网 络 上 得 来 的 信息 显示 在 屏幕 上 了 。 这 时 就 遇 到 了 一 
个 难题 : 怎样 获取 网 络 上 的 信息 。 这 对 Web 开发 者 来 说 似乎 非常 容易 ， 因 为 他 们 只 需要 选择 一 门 
脚本 语言 (ASP、PHP、JSP 甚至 Ruby) 将 要 显示 的 内 容 上 传 到 服务 器 上 ， 用 户 就 可 以 通过 浏览 
器 进行 访问 了 。 

但 是 对 于 PhoneGap 的 开发 者 来 说 解决 这 个 问题 非常 困难 ， 排 除 掉 难 以 获得 信任 的 API， 可 
以 使 用 的 只 剩 下 HTML、CSS 和 JavaScript。 准 确 点 说 ， 在 实现 获取 来 自 网 络 的 信息 这 一 点 上 ， 
能 依靠 的 只 剩 下 JavaScript 了 。 


14.3.1 使 用 Ajax 获取 JSON 数据 


好 在 JavaScript 为 开发 者 提供 了 一 种 可 以 异步 与 服务 器 交换 数据 ， 并 能 够 对 页 面 进行 更 新 的 
技术 ， 叫 做 Ajax。 笔 者 毫 不 客气 的 说 ， 你 甚至 都 不 用 异步 ， 只 要 能 让 我 更 新 数据 就 足够 了 。 这 就 
是 下 面 的 代码 所 实现 的 功能 。 
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此 外 ， 还 需要 在 同一 目录 下 保存 内 容 { "firstName": "Bill","lastName": "Gates","age": 60} 到 文件 
testjs 中 去 。 之 后 运行 上 述 代码 ， 点 击 屏幕 上 的 文字 ， 结 果 如 图 14.6 所 示 ， 图 中 被 框 起 来 的 部 分 
是 利用 Ajax 从 testjs 文件 中 读 出 的 数据 。 


Gates 60 
点 击 这 里 获取 数据 


图 14.6 利用 Ajax 获取 其 他 文件 中 的 JSON 数据 


接 下 来 要 做 的 就 是 将 testjs 上 传 到 服务 器 了 ， 读 者 可 以 使 用 Xampp、AppServ 等 一 键 安装 包 
来 在 Windows 下 安装 Apache 以 及 PHP 服务 器 环境 。 安 装 完成 后 可 以 在 如 图 14.7 所 示 的 面板 中 启 
动 服务 器 。 


Portls) ”Actions 
80, 443 
3306 


12: 44:26 [nati All prerequisites found 

12: 44:26 [nati Initializing Modules 

12: 44; 26 [nati Starting Check-Tiner 

12:44:26 [nati Control Panel Ready 

12: 44: 28 Attenpting to start Apache app... 
12: 44: 28 Status change detected: running 

12: 44:29 Attempting to start KySQL app... 

12: 44: 29 Status change detected: running 

12:44:34 [nain] Executing“c: \xanpp\” 


图 14.7 Xampp 的 控制 面板 
把 testjs 文件 上 传 到 Apache 根 目录 之 后 ， 上 述 代码 的 第 11 行 修改 为 : 
~ S$-getysoN(https//127.0.0.1/testjs" ,fonctionlrestlt) 
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然后 再 运行 修改 后 的 范例 ， 发 现 已 经 无 法 获取 testjs 中 的 JSON 数据 了 。 但 是 如 果 将 范例 代 
码 也 一 同 复制 到 Apache 根 目 录 下 ， 通 过 浏览 器 执行 范例 ， 的 确 能 够 获取 JSON 数据 。 这 就 说 明了 
代码 上 是 没有 错误 的 ， 那 到 底 是 哪里 出 了 错误 呢 ? 

问题 出 在 了 jQuery 的 geUSON 方法 上 , 虽然 通过 Ajax 可 以 访问 其 他 文件 或 者 页 面 上 的 数据 ， 
但 是 出 于 安全 考虑 ， 却 要 求 这 两 个 页 面 必须 处 在 同一 个 “ 域 ” 中 。 这 下 子 就 麻烦 了 ， 好 不 容易 想 
到 了 获取 数据 的 方法 却 也 不 能 使 用 ， 这 该 如 何 是 好 啊 。 


14.3.2 ”使 用 JavaScript 跨 域 解决 方案 


上 一 小 节 我 们 所 使 用 的 获取 JSON 数据 的 方法 由 于 跨 域 的 原因 失败 了 ， 但 是 实际 上 通过 上 一 
小 节 的 例子 ， 我 们 已 经 非常 接近 解决 问题 的 最 终 方案 了 。 在 揭示 解决 方法 之 前 ， 笔 者 先 解释 一 下 
什么 是 跨 域 。 

跨 域 问题 是 JavaScript 安全 体系 中 为 了 防止 一 些 不 安全 的 调用 而 设计 的 一 种 同 源 策 略 ， 有 具体 
如 表 14.1 所 示 。 


表 14.1 JavaScript 中 的 同 源 策略 
是 否 允 许 通信 


http://www.a.com/a.js 同一 域名 下 同一 目录 允许 
http://www.a.conmy/b.js 

http://www.a.conylab/a.js 同一 域名 下 不 同 目录 允许 
http://www.a.com/script/b.js 


http://www.a.com:8000/ajs 同一 域名 下 不 同 端口 不 允许 
http://www.a.conmyb.js 


http://www.a.conya.js 同一 域名 下 同一 目录 不 同 协议 不 允许 
https://www.a.com/b.js 

http://www.a.com/a.js 域名 和 域名 相应 的 他 不 允许 
http:/70.32.92.74/bjs 


http://www.a.com/a.js 主 域名 和 子 域名 不 允许 
http://script.a.com/b.js 

http://www.a.a.com/a.js 同一 域名 下 的 不 同 子 域名 不 允许 
http://www.b.a.com/b.js 

http://www.cnblogs.com/a.js 不 同 域名 不 允许 
http://www.a.com/b.js 


在 实际 运行 PhoneGap 时 ， 显 然 是 处 于 不 同 域名 下 的 情况 (甚至 就 是 两 个 没有 关系 的 他), 在 
同 源 策略 中 是 不 能 允许 它们 进行 通信 的 。 但 是 这 难 不 倒 伟 大 的 程序 员 们 ， 他 们 发 现 了 许多 可 以 突 
破 这 种 限制 的 方法 ， 比 如 下 面 的 代码 。 
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此 外 ， 还 需要 对 上 传 到 服务 器 上 的 文件 testjs 做 一 些 修改 ， 修 改 后 的 内 容 为 : 


然后 再 运行 本 范例 ， 就 可 以 发 现 已 经 能 够 实现 跨 域 获取 JSON 数据 了 ， 如 图 14.8 所 示 。 


Bill 
Gates 
60 


点 击 这 里 获取 数据 


图 14.8 ”从 服务 器 上 获取 的 JSON 数据 


这 样 一 来 读者 可 能 就 明白 了 ， 只 要 能 够 在 服务 端 生成 相应 的 数据 ， 就 能 够 很 容易 地 利用 这 种 
方法 来 实现 对 信息 的 跨 域 获取 了 。 


在 实际 开发 中 ， 常 常 使 用 类 似 的 原理 来 将 一 些 内 容 进行 封装 。 然 后 利用 jQuery 中 的 Ajax 来 
提供 对 下 拉 刷 新 等 功能 的 支持 。 本 项 目 主要 是 为 了 展示 原理 ， 因 此 不 考虑 这 些 功能 。 
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14.3.3 “今日 头条 ”服务 端的 实现 
现在 要 做 的 就 是 要 利用 PHP 来 实现 服务 端 JSON 数据 的 生成 了 , 这 实际 上 不 过 是 从 数据 库 读 
取信 息 , 然后 对 字符 串 做 一 些 简单 拼接 的 工作 ， 因 此 很 容易 实现 。 现在 首先 需要 设计 一 个 数据 库 。 
由 于 数据 量 不 大 ， 可 以 仅 设计 两 个 表 来 实现 ， 这 两 个 表 分 别 是 记录 了 新 闻 列表 、 作 者 等 内 容 的 
news_List 表 和 记录 了 每 条 新 闻 具 体内 容 的 表 news_Neirong。 它 们 的 具体 结构 如 表 14.2 和 表 14.3 
所 示 。 
表 14.2 表 news_List 的 数据 结构 


rw 报 作 行 数 起 类 型 草 理 大 小 “多 余 
news_list | 浏览 4 结构 二 执 索 了: 插入 锋 青空 人 @ 出 际 “0 InnoDB latinl_swedish. 32 18 
32 KB 


口 
口 news_neirong “| 浏览 六 结构 专 搜索 下 括 入 狗 青 宇 合 出 际 0 InnoDB lat: 
2 张 表 总 计 0 InnoDB latinl_: 


图 14.9 新 建 数据 库 的 结构 
接 下 来 在 服务 器 根 目 录 下 新 建 一 个 文件 ， 命 名 为 testphp， 按 照 下 面 的 内 容 进行 编辑 。 
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保存 范例 文件 ， 并 在 浏览 器 中 输入 地 址 http://127.0.0.1/test.php， 在 打开 的 页 面 上 可 以 看 到 如 
图 14.10 所 示 的 数据 。 


在 测试 时 一 定 不 要 忘记 向 数据 库 中 输入 测试 数据 ， 否 则 得 到 的 是 一 个 空白 的 页 面 。 


var json = [{ “title”:“ 第 二 条 新 闻 “, “author”:“ 猫 从 “, “date”:“2014-04-07”, “content”:“ 我 刚刚 下 
楼 吃 了 碗 拉面 ， 结 果 发 现 好 像 泡 面 会 更 好 吃 一 点 }, {“title”:“ 第 一 条 新 闻 ”, “author”:“ 猫 
区 "date": “2014-04-07"，“content“: “这 是 第 一 条 新 闻 ， 用 于 对 第 15 章 中 的 项 目 进行 测试 。“]] 


14.10 利用 PHP 生成 的 JSON 数据 
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但 是 现在 有 一 个 问题 ， 在 前 面 的 范例 中 引入 的 是 一 个 后 级 为 js 的 文件 ， 虽 然 可 以 认为 这 是 JSON 
的 缩写 , 但 是 这 并 不 影响 浏览 器 将 它 作 为 标准 的 JavaScript 脚本 文件 来 解析 ， 而 在 本 范例 中 返回 的 地 址 
是 一 个 PHP 文件 ， 这 会 不 会 影响 读 取 的 效果 呢 ? 因此 还 需要 使 用 下 面 的 方法 再 做 一 次 测试 。 


运行 后 点 击 屏幕 上 的 “点 击 这 里 获取 数据 ” 字 梯 可 以 看 到 确实 能 够 从 PHP 页 面 上 获取 到 数 
据 ， 如 图 14.11 所 示 。 

这 是 为 什么 呢 ? 简单 地 说 ， 就 是 由 于 在 范例 的 第 10 行 中 ， 对 script 标签 进行 设置 时 为 它 设置 
了 一 个 属性 type="textijavascript"， 这 样 一 来 浏览 器 进行 解析 的 时 候 不 管 这 是 一 个 什么 类 型 的 文件 
都 会 以 JavaScript 的 形式 去 执行 其 中 的 内 容 。 也 就 是 相当 于 在 一 个 外 部 的 js (JavaScript) 文件 中 
定义 了 一 组 JSON 数据 ， 只 不 过 这 里 的 JSON 数据 是 由 PHP 动态 生成 的 。 
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第 二 条 新 闻 猫 苑 2014-04-07 我 刚刚 下 楼 吃 了 辜 拉 面 ， 结 果 发 现 好 像 泡 面 会 更 好 吃 一 点 
第 一 条 新 闻 猫 爷 2014-04-07 这 是 第 一 条 新 闻 ， 用 于 对 第 15 章 中 的 项 目 进行 测试 。 


点 击 这 里 获取 数据 


图 14.11 从 PHP 页 面 中 获取 的 JSON 数据 


] 纪 . 亿 让 数据 显示 出 来 


在 实现 了 从 服务 端 读 取 数据 的 功能 之 后 ， 接 下 来 的 工作 就 比较 轻松 了 ， 只 需要 将 这 些 数据 在 
之 前 写 好 的 HTML 页 面 中 显示 出 来 ， 然 后 利用 PhoneGap 打包 就 可 以 了 。 为 了 方便 读者 学 习 ， 笔 
者 将 直接 在 14.2 节 创 建 的 两 个 基础 HTML 界面 上 进行 展示 ， 然 后 再 将 完整 的 代码 整合 到 14.2.3 
小 节 中 实现 的 界面 上 去 。 首 先 来 实现 新 闻 列 表 的 显示 。 


14.4.1 新 闻 列 表 的 显示 
找到 14-1.html 文件 ， 按 照 以 下 内 容 对 它 进行 修改 。 
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运行 后 的 结果 如 图 14.12 所 示 。 


PhoneGap 新 闻 


14.12 将 服务 端的 JSON 数据 显示 在 新 闻 列表 中 
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可 以 看 到 ， 相 对 于 未 修改 前 ， 代 码 变化 其 实 并 不 大 ， 仅 有 两 个 主要 的 变化 。 一 是 在 代码 的 开 
头 引 入 了 JSON 源 ， 即 第 7 行 。 二 是 在 第 24~42 行使 用 了 字符 拼接 ， 得 到 了 一 段 HTML 脚本 ， 然 
后 利用 document.write 方法 将 这 段 脚本 显示 出 来 。 

此 外 , 在 这 段 代码 中 还 加 入 了 一 个 新 的 自 定义 函数 show_new(i), 它 用 来 作为 今后 显示 新 闻 内 
容 时 对 用 户 点 击 操作 预 留 的 接口 ， 这 里 先 不 管 它 。 目 前 ， 当 用 户 点 击 新 闻 列 表 时 ， 该 函数 会 弹出 
一 个 对 话 框 告诉 用 户 这 是 第 几 条 新 闻 。 

此 处 需要 说 明 一 下 ， 为 什么 要 选用 document.write 这 种 方式 在 页 面 上 显示 数据 ， 而 不 采用 
JavaScript 中 的 一 些 DOM 方法 动态 地 对 内 容 进 行 排列 布局 。 笔 者 这 样 做 主要 是 有 两 个 原因 : 

第 一 原因 是 在 本 范例 中 要 求 在 页 面 一 打开 时 就 将 获取 的 数据 显示 出 来 ， 虽 然 说 JSON 数据 比 
较 轻 量 ， 能 够 快速 地 获取 到 来 自 网 络 的 JSON 数据 ， 但 是 这 毕 况 是 需要 时 间 的 。 如 果 在 页 面 一 打 
开 时 就 自动 对 数据 进行 动态 显示 ， 会 导致 实际 上 什么 数据 也 没有 获取 到 就 打开 (空白 ) 页 面 了 ， 
这 显然 是 不 行 的 。 

另 一 个 原因 就 是 这 样 做 很 简单 ， 好 理解 。 


14.4.2 ”新 闻 内 容 的 显示 


与 新 闻 列表 相 比 ， 在 页 面 上 显示 出 新 闻 的 内 容 相对 是 太 简单 了 ， 因 为 它 不 需要 考虑 一 共有 多 
少 条 数据 。 这 次 我 们 将 在 14-2.html 的 基础 上 进行 修改 ， 具 体 方法 如 下 所 示 。 
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运行 后 的 结果 如 图 14.13 所 示 。 

需要 注意 的 是 ， 在 运行 本 范例 时 ， 需 要 先 点 击 一 下 屏幕 才能 获取 到 ， 这 是 由 于 如 果 直 接 进 行 
获取 所 显示 数据 的 操作 ， 可 能 在 获取 数据 之 前 产生 错误 而 采取 的 变通 之 法 。 乍 一 看 这 可 能 会 让 某 
些 用 户 觉得 很 不 严 ， 但 是 再 一 想 这 个 页 面 本 来 就 是 需要 通过 点 击 来 实现 的 ， 因 此 也 就 没有 什么 特 
别 需要 担忧 的 了 。 


图 14.13 点击 屏幕 后 新 闻 内 容 被 显示 出 来 


14.4.3 项 目的 最 终 实现 


至 此 ， 该 项 目的 全 部 功能 就 已 经 实现 了 ， 现 在 要 做 的 就 是 将 这 两 个 页 面 结合 在 一 起 ， 请 各 位 
读者 找到 14-3.html (14.2.3 节 ) 的 代码 ， 参 照 本 节 介 绍 的 代码 进行 修改 。 修 改 后 的 内 容 如 下 所 示 。 
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这 样 一 来 应 用 就 可 以 以 一 个 独立 APP 的 形式 运行 了 双击 之 后 显示 的 是 新 闻 列 表 , 如 图 14.14 
所 示 ， 点 击 任意 一 个 列表 项 ， 会 切换 到 相应 的 新 闻 内 容 界面 ， 如 图 14.15 所 示 ， 再 点 击 “ 返 回 ” 
按钮 又 回 到 新 闻 列 表 界 面 。 

下 面 笔 者 再 讲解 一 下 实现 的 思路 〈 不 是 代码 的 原理 ， 而 是 怎样 由 前 两 小 节 的 代码 得 到 该 例 代 
码 )。 首 先 ， 在 14-3.html 中 已 经 准备 好 了 两 个 界面 之 间 切 换 的 功能 ， 但 是 它 在 内 容 的 显示 方面 仍 
然 是 “静态 的 ” 即 无 法 从 服务 端 获取 数据 。 因 此 第 一 部 就 是 引入 外 部 的 JSON 数据 ， 如 范例 第 7 

接 下 来 就 是 将 这 些 数据 在 列表 页 面 中 显示 , 如 范例 第 66~85 行 所 示 , 与 14.4.1 节 中 完全 一 样 ， 
直接 复制 就 可 以 了 。 由 于 此 处 引用 了 一 个 自 定义 函数 show_new0， 因 此 需要 连 该 函数 一 起 复制 过 
来 。 此 时 ， 该 函数 就 可 以 发 挥 一 些 作 用 了 ， 比 如 页 面 间 的 跳 转 。 

此 外 ， 由 于 新 闻 编号 在 该 自 定义 函数 中 被 当 作 参数 传递 ， 因 此 可 以 通过 该 函数 来 实现 新 闻 内 
容 的 加 载 (范例 第 32~41 行 )。 


由 于 在 此 处 使 用 的 innerHTML 方法 ， 会 直接 替换 掉 之 前 写 在 元 素 中 的 内 容 ， 因 此 不 需要 考虑 


在 第 二 次 打开 新 闻 内 容 时 ， 内 容 会 不 会 重生 的 问题 。 


最 后 ， 可 以 把 整个 HTML 文件 复制 到 PhoneGap 中 进行 测试 了 ， 注 意 ， 如 果 是 在 真 机 上 进行 
测试 的 话 ， 不 要 忘记 了 连接 网 络 。 还 有 ， 如 果 是 使 用 一 键 安装 的 Apache， 可 能 默认 是 不 能 被 外 网 
访问 的 ， 需 要 在 httpd-xampp.conf 文件 中 找到 一 行内 容 为 “Deny from all” 的 语句 用 “# ”注释 掉 。 
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PhoneGap 新 闻 返 PhoneGap 新 闻 


图 14.14 新 闻 列 表 图 14.15 新 闻 内 容 界 面 


14.5 小结 


到 此 为 止 ， 一 款 具有 一 定 实用 价值 的 “今日 头条 ”新 闻 客 户 端 就 算 完成 了 。 笔 者 认为 ， 本 章 
所 使 用 的 这 个 例子 要 比 许多 真正 上 线 的 原生 安 卓 新 闻 应 用 要 “好 用 ”得 多 ， 而 且 它 实现 起 来 非常 
简单 ， 最 重要 的 是 除了 最 终 的 测试 ， 其 他 所 有 步骤 都 是 通过 PC 端的 浏览 器 来 进行 的 ， 这 使 得 笔 
者 在 开发 时 ， 不 必 对 着 那个 令 人 愧 恼 的 模拟 器 较劲 了 。 如 果 有 更 高 追求 的 读者 ， 可 以 尝试 着 使 用 
Ajax 配合 网 上 一 些 下 拉 刷 新 的 插件 ， 来 实现 真正 的 异步 加 载 功 能 ， 让 这 个 “今日 头条 ”APP 的 功 
能 更 加 强大 。 
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HTML 5+PhoneGap 


拨号 功能 。 另 外 ， 本 章 将 使 用 jQuery Mobile 来 生成 应 用 的 界面 。 


买 现 通讯 寺 APP 


本 章 利用 PhoneGap 中 的 联系 人 对 象 制作 一 款 电 话 号 码 本 。 此 外 本 章 还 要 补充 一 个 之 前 遗漏 
的 重要 知识 点 ， 即 在 PhoneGap 中 自 定义 插件 的 方法 ， 本 章 将 利用 此 方法 来 实现 PhoneGap 的 电话 


及 趣 | 本 章 因为 使 用 安 卓 开发 环境 ， 所 以 ， 如 果 有 兴趣 的 读者 可 以 参考 最 后 的 附录 来 配置 安 卓 开 发 


【 环境 。 
本 章 主要 内 容 包括 : 
@ 学 会 使 用 jQuery Mobile 来 实现 界面 
e@ 学 会 使 用 JavaScript 来 动态 加 载 页 面 内 容 
e@ 如 何 将 PhoneGap 中 读 取 的 联系 人 信息 加 载 到 应 用 中 
e ”PhoneGap 插件 的 制作 方法 


本 章 将 模仿 安 卓 系统 自 带 的 联系 人 功能 ， 实 现 一 款 
简单 的 电话 号 码 本 的 功能 , 它 包括 对 联系 人 列表 的 查看 、 
新 建 联 系 人 、 删 除 联系 人 以 及 电话 的 拨打 、 短 信 发 送 等 
功能 。 在 设计 这 款 应 用 之 前 可 以 参考 安 卓 系统 自 带 的 联 
系 人 界面 ， 如 图 15.1 所 示 。 

通过 “新 建 联系 人 ”进入 到 如 图 15.2 所 示 的 界面 ， 
用 户 可 以 在 其 中 创建 新 的 联系 人 。 


ME 


Set up my profile 


A 


Auto Man 


Jack 


Jquery 
4 


Kiler 


图 15.1 安 卓 自 带 联系 人 界面 


第 15 章 HTML 5+PhoneGap 实现 通讯 录 APP 
[| 
完成 创建 


Phone-only, unsynced contact 区 


ANewContact | 插入 联系 人 的 姓名 


Add organization 


PHONE 


1337-7777777 | 插入 联系 人 的 电话 oa 上 


Add new 


EMAIL 


295342663@qq com 


Add new 
ADDRESS 


Address 


图 15.2 新 建 联系 人 的 界面 
当然 也 可 以 点 开 某 个 具体 的 联系 人 页 面 来 对 联系 人 的 资料 进行 编辑 或 查看 ， 如 图 15.3 所 示 。 
230| 
《ANew Contact 立 


PHONE 
1337-777-7777 
MOBILE 

EMAIL 


295342663@qq.com 
10ME 


图 15.3 可 在 该 界面 查看 某 联系 人 的 具体 信息 


此 外 还 可 以 直接 通过 联系 人 的 界面 对 联系 人 进行 拨号 。 本 章 将 实现 这 么 一 款 有 类 似 功能 的 应 
用 ， 实 现时 会 根据 实际 需要 作 一 些 简单 的 调整 。 


为 PhoneGap 编写 插件 
通过 上 一 届 的 讲解 ， 读 者 已 经 对 本 章 的 项 目 有 一 个 大 概 的 了 解 。 另 外 ， 本 项 目 有 两 个 重要 的 


303 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


功能 是 利用 本 章 所 实现 的 APP 完成 发 送 短信 和 拨打 电话 。 通 过 学 习 本 书 , 我 们 知道 , 在 PhoneGap 
中 并 没有 提供 实现 这 两 个 功能 的 API。 当 然 可 以 用 一 些 非 常 “ 土 束 ” 的 办 法 来 糊弄 用 户 ， 比 如 用 
户 单 击 代表 “发 送 ” 功 能 的 按钮 后 ， 弹 出 一 个 对 话 框 提示 “对 不 起 ， 该 功能 正在 开发 中 ， 敬 请 期 
待 ”但 是 这 绝对 会 在 招来 用 户 的 咒骂 之 前 ， 先 招来 读者 的 咒骂 ， 因 此 只 能 寻找 其 他 办 法 。 

作为 一 名 勤劳 而 又 聪明 的 劳动 人 民 ， 笔 者 一 直 坚信 拿 来 主义 ， 即 : 有 现成 的 为 什么 不 用 。 但 
是 当 没有 现成 的 工具 可 以 使 用 时 ， 笔 者 也 不 会 随意 向 需求 认输 。 本 节 将 实现 利用 PhoneGap 发 送 
短信 和 打 电 话 的 功能 插件 ， 来 弥补 PhoneGap 的 不 足 。 


15.2.1 实现 发 短信 的 插件 


本 小 节 详 细 地 介绍 为 PhoneGap 开发 短信 插件 的 方法 ， 也 顺便 让 读者 了 解 一 下 怎样 为 
PhoneGap 加 入 自己 需要 的 新 功能 的 API。 

在 为 PhoneGap 开发 插件 时 ， 由 于 需要 对 设备 的 功能 进行 调用 ， 因 此 需要 读者 具备 一 定 的 安 
卓 SDK 开发 基础 〈 本 章 之 前 我 们 所 有 的 介绍 都 允许 读者 没有 任何 SDK 基础 )。 开 发 插件 属于 比 
较 “ 高 级 ”的 技能 ， 但 是 这 并 不 代表 它 有 多 难 掌握 ， 相 信 读 者 根据 笔者 的 引导 一 定 能 够 彻底 地 掌 
握 。 

首先 在 项 目 中 新 建 一 个 类 命名 为 Message, 并 让 它 继承 类 Plugin, 在 其 中 编写 代码 如 下 所 示 。 
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之 后 保存 编写 的 代码 。 


在 某 些 版 本 的 PhoneGap 中 也 许 是 需要 继承 Plugin 类 ， 或 者 是 其 他 有 类 似 名 称 的 类 ， 这 是 由 
于 PhoneGap 版 本 不 同 造成 的 。 如 果 遇 到 问题 ， 读 者 可 以 翻阅 相关 的 文档 。 


首先 声明 一 个 字符 类 型 的 常量 SEND〈 如 范例 第 12 行 所 示 )， 因 为 PhoneGap 需要 接受 一 个 
来 自 于 HTML 页 面 的 请 求 信号 , 而 该 变量 的 值 将 被 用 来 判断 请 求 的 类 型 。 比 如 本 例 中 SEND 的 值 
为 “send”， 那 么 当 HTML 页 面 请 求 的 值 为 “send” 时 ， 系 统 就 会 认为 是 要 调用 本 例 中 所 实现 的 
功能 了 。 

再 在 Message 类 中 重 写 一 个 方法 execute, 在 其 他 版 本 的 PhoneGap 中 也 许 要 使 用 不 同 的 名 称 ， 
但 是 做 法 上 是 非常 相似 的 ， 相 信 读 者 能 够 举一反三 。 具 体 的 细节 先 不 去 理解 ， 因 为 现在 还 没有 完 
成 整个 插件 ， 想 要 理解 范例 中 19~22 行 的 内 容 有 点 难度 。 

首先 在 www 目录 下 新 建 一 个 js 文件 ， 命 名 为 PhoneGapPluginjs， 在 文件 中 加 入 如 下 面 所 示 
的 代码 。 
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有 了 这 一 段 代码 ， 就 可 以 配合 前 面 第 一 段 代码 理解 整个 插件 的 原理 了 。 

先 来 看 本 范例 的 第 3 行 中 的 参数 ， 是 不 是 有 点 眼熟 呢 ? 在 PhoneGap 提供 的 大 多 数 API 中 都 
会 用 到 success 和 error 作为 参数 ， 分 别 表 示 调 用 API 成 功 和 失败 。 除 此 之 外 该 API 应 该 还 有 两 个 
参数 ， 分 别 保存 短信 发 送 的 目标 号 码 和 短信 的 内 容 。 

再 看 第 5 行 ，exec() 方 法 的 参数 与 定义 的 API 参数 非常 类 似 ， 只 是 多 了 一 个 值 为 “send” 的 参 
数 。 再 回头 看 看 第 一 段 代 码 的 第 18 行 ， 就 是 将 接收 到 的 来 自 HTML 页 面 的 参数 与 常量 SEND 做 
比较 。 而 常量 SEND 的 值 又 恰恰 是 “send”。 

这 下 应 该 明白 了 吧 ，exec 是 PhoneGap 中 定义 的 一 个 方法 ， 它 能 够 将 一 些 参数 发 送 给 系统 ， 
在 本 例 中 被 Message 类 接受 并 处 理 。 有 读者 可 能 要 问 为 什么 系统 会 知道 这 个 方法 要 由 Message 类 
来 处 理 呢 ? 因为 在 exec0 方 法 的 第 3 个 参数 中 已 经 说 明了 处 理 这 个 请 求 的 类 名 为 Message。 

再 回 过 头 来 看 第 一 段 代 码 中 的 第 19~22 行 ， 这 里 使 用 了 getString0 方 法 来 获取 来 自 HTML 页 
面 的 请 求 中 的 参数 ， 然 后 在 第 26 行将 参数 中 包含 的 内 容 发 送 到 指定 的 号 码 中 去 。 

当然 ， 这 并 不 代表 插件 就 这 样 完成 了 ， 还 需要 对 项 目 做 一 些 简单 的 设置 才能 正常 使 用 。 在 项 
目 中 找到 目录 res/xml/config.xml， 在 该 文件 的 最 后 加 上 一 句 : 


本 实际 上 根据 PhoneGap 版 本 不 同 ， 以 及 读者 自己 所 创建 的 项 目 名 称 或 者 设置 不 同 ， 该 步骤 会 
略 有 区 别 ， 比 如 笔者 在 网 上 看 到 不 少 博客 中 都 是 在 res/xmil/plugins.xml 中 进行 的 配置 。 读 者 可 
以 不 必 在意 这 种 区 别 ， 只 需要 确定 在 xml 目录 下 找到 一 个 文件 ， 文 件 中 有 不 少 类 似 图 15.4 中 


所 显示 的 代码 即 可 。 另 外 ， 所 插入 部 分 的 name 属性 一 定 要 与 自己 创建 的 类 名 相同 。 


prekeceace batpe 一 exXLL-OH-SUsBead vaiue—"LaLse" 1 


in name="App" value="org.apache.cordova. App"/> 
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/> 
<plagin name="Device" value="org.apache. cordova. Device"/> 

<Plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/> 
<plugin name="Compass" value="org.apache.cordova.CompassListener"/> 
<plugin name= "Media" value=". sad apache. cordova. AudioHandler"/> 

a er Comeraranachas"/> 
a name="File" value="org.apache. cordova. FileDtils"/> 

<plugin name="Netvorkstatus" value="org.apache. cordova. NetvorkManager"/> 
<plugin name="Notificatidn" value="org.apache. cordova.Notification"/> 
<plugin name="Storage" value="org.apache. cordova. Storage"/> 

<plugin name="FileTransfeA" value="org.apache.cordova. FileTransfer"/> 
<plugin name="Capture" valle="org.apache. cordova.Capture"/> 

<plugin name="Battery" vale="org.apache. cordova.BatteryListener"/> 
isos BRE oler oon Neee or Apache. aoe Piayhsorean’/ 


i 
Er n nr value="com. 必 汪 这 helliovorld.Message"/ 寺 


ay 


15.4 在 pluginsxml 中 插入 的 内 容 


最 后 ， 记 得 在 使 用 自制 插件 时 ， 还 需要 另外 在 HTML 文件 中 引入 自 定义 的 js 脚本 ， 引 入 方 
法 如 下 : 


306 


15 章 “HTML 5+PhoneGap 实现 通讯 录 APP 


接 下 来 就 可 以 在 虚拟 机 上 测试 这 个 插件 是 不 是 真 的 有 效 了 ， 使 用 方法 如 下 所 示 。 


在 PhoneGap 中 编译 并 在 虚拟 机 上 运行 ， 运 行 之 后 点 击 屏幕 上 的 “发 送 短信 ”字样 ， 即 可 向 
另 一 台 虚 拟 机 发 送 短信 (前 提 是 另 一 台 虚拟 机 已 经 打开 )， 如 图 15.5 是 另 一 台 虚拟 机 中 接收 到 短 


百 。 
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hellothisis my firstshortmessage by PhoneGap 


4 


图 15.5 另 一 台 虚 拟 机 接收 到 了 短信 


可 能 有 些 读者 还 不 了 解 应 该 怎样 在 虚拟 机 上 测试 发 送 短信 的 功能 ， 在 此 笔者 将 做 一 个 简单 的 
介绍 。 在 虚拟 机 的 项 部 会 有 一 个 比较 奇怪 的 数字 ， 一 般 为 5554， 如 图 15.6 所 示 。 它 代表 当前 虚拟 
机 的 号 码 , 通过 它 可 以 对 虚拟 机 进行 短信 、 电 话 功能 的 测试 。 笔 者 又 新 建 了 一 个 虚拟 机 号 码 为 5556 

(注意 这 个 号 码 是 由 系统 分 配 的 )， 然 后 通过 号 码 为 5554 的 虚拟 机 向 它 发 送 短 信 ， 就 可 以 测试 插 
件 的 短信 功能 了 。 


及 元 这 里 教 给 使 用 真 机 进行 测试 的 读者 一 个 省 钱 的 办 法 ， 那 就 是 可 以 发 送 某 些 特 定 的 内 容 给 
10086， 达 到 节约 一 毛 话费 /次 的 目的 。 其 实 对 大 多 数 开发 者 来 说 也 许 一 毛 钱 根本 不 在 乎 ,不 

| 过 想到 终于 有 机 会 搞怪 了 ， 会 不 会 心情 格外 舒畅 导致 开发 效率 大 增 呢 ? 这 真是 个 有 待考 证 的 
趣事 。 


区 5554:nexus 


编辑 短信 内 容 


这 就 是 那个 奇怪 的 数字 


图 15.6 虚拟 机 的 号 码 


15.2.2 为 PhoneGap 编写 电话 拨号 插件 


上 一 小 节 实现 了 一 个 在 PhoneGap 中 不 具备 的 短信 发 送 功能 ， 本 小 节 将 实现 利用 PhoneGap 
打 电 话 的 插件 。 


01 “// 引入 各 种 需要 的 类 
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接 下 来 再 编写 对 应 的 JavaScript 文件 ， 直 接 在 PhoneGapPluginjs 中 加 入 以 下 内 容 : 


构建 跨 平 台 APP: HTML 5 + PhoneGap 移动 应 用 实战 


由 于 代码 与 上 一 小 节 中 的 类 似 ， 这 里 就 不 再 做 讲解 了 ， 请 读者 自行 对 比 代码 进行 理解 。 


.3 通讯 录 App 的 界面 设计 


上 一 节 通 过 编写 插件 的 方式 ， 实 现 了 利用 PhoneGap 拨打 电话 和 发 短信 的 功能 ， 而 PhoneGap 
本 身 又 提供 了 对 联系 人 信息 的 获取 功能 ， 也 就 是 说 目前 想 要 实现 这 款 号 码 本 应 用 的 全 部 功能 都 可 
以 实现 了 ， 技 术 上 完全 没有 问题 了 。 此 时 就 可 以 放心 大 胆 地 进行 界面 设计 了 。 

15.1 节 已 经 明确 了 该 应 用 将 模仿 安 卓 自 带 的 联系 人 功能 进行 设计 ， 也 就 是 说 主要 功能 就 是 对 
联系 人 的 创建 、 删 除 ， 以 及 对 联系 人 进行 打 电 话 或 发 短信 的 操作 。 

由 此 可 以 判断 出 ， 该 应 用 最 主要 的 界面 应 当 是 一 个 列表 ， 观 察 图 15.1 中 的 界面 会 发 现 ， 安 卓 
自 带 的 联系 人 列表 中 并 没有 列 出 联系 人 的 号 码 ， 笔 者 刚 发 现 这 一 点 的 时 候 觉得 有 些 不 可 思议 。 但 
当 笔者 经 过 了 仔细 思考 后 ， 发 现 这 种 做 法 在 某 种 程度 上 是 非常 合情合理 的 。 

因为 对 用 户 来 说 他 们 只 需要 知道 电话 将 拨 给 哪个 联系 人 ， 而 不 需要 知道 这 个 人 的 号 码 具体 是 
多 少 ， 这 可 以 省 出 一 点 手机 上 宝贵 而 有 限 的 空间 。 因 此 在 本 项 目 中 ， 我 们 也 不 会 将 联系 人 的 号 码 
显示 在 联系 人 列表 中 。 

此 外 ， 在 本 项 目 中 将 取消 列表 中 的 联系 人 头像 ， 毕 竞 现在 越 来 越 多 的 人 开始 愿意 购买 一 部 廉 
价 的 安 卓 手机 作为 备用 机 使 用 。 他 们 只 需要 这 部 手机 能 够 打 电 话 就 可 以 了 ， 而 且 他 们 中 的 许多 人 
也 懒得 为 每 一 个 联系 人 加 入 照片 头像 ， 但 是 每 次 打 电 话 时 看 着 空白 的 头像 又 会 感到 闹 心 ， 索 性 我 
们 就 取消 这 个 头像 显示 功能 好 了 。 

再 就 是 ,还 要 在 界面 的 底部 保留 让 用 户 添加 联系 人 的 按钮 .最 终 设计 出 的 联系 人 列表 如 图 15.7 


所 示 。 


联系 人 一 
联系 人 二 
联系 人 三 
联系 人 四 


十 | + 


十 |+ 


联系 人 五 


十 | + 


联系 人 六 
联系 人 七 
联系 人 人 
“新 建 联系 人 

图 15.7 设计 好 的 联系 人 列表 


十 | + 
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其 中 ， 项 部 栏 仅 作 装 饰 使 用 ， 也 可 以 根据 需要 加 入 “退出 ”按钮 ， 底 部 栏 是 一 个 按钮 ,用 于 
新 建 联系 人 。 项 部 栏 偏 下 的 地 方 是 一 个 搜索 栏 ， 用 于 查找 联系 人 。 而 页 面 的 主要 空间 则 被 联系 人 
列表 占据 。 列 表 中 的 每 一 项 分 为 两 部 分 ， 其 中 左 侧 显示 联系 人 的 姓名 或 是 昵称 ， 点 击 之 后 则 会 自 
动向 该 联系 人 拨打 电话 ， 右 侧 是 一 个 图 标 ， 点 击 之 后 则 会 跳 转 到 短信 发 送 页 面 。 

由 此 可 知 ， 该 项 目 中 还 需要 短信 发 送 和 新 建 联系 人 两 个 界面 ， 分 别 如 图 15.8 和 图 15.9 所 示 。 

图 15.8 展示 的 是 短信 发 送 的 界面 ， 可 以 在 其 中 编辑 短信 内 容 并 通过 底部 的 “发 送 ”按钮 发 送 
短信 ， 也 可 以 单 击 左 上 角 的 “返回 ”按钮 取消 短信 编辑 ， 并 返回 到 联系 人 列表 中 去 。 此 外 ， 还 应 
当 能 将 短信 发 送 的 目标 在 顶部 栏 中 显示 出 来 ， 比 如 当 笔 者 给 10086 发 送 短信 时 就 应 当 显示 出 “发 
送 给 : 10086”。 

图 15.9 展示 出 的 是 新 建 联 系 人 的 界面 ， 对 比 图 15.2 中 的 安 卓 原生 的 新 建 联系 人 界面 会 发 现 ， 
笔者 设计 的 界面 在 功能 上 要 简单 了 许多 ， 许 多 功能 〈 比 如 邮箱 和 地 址 ) 都 被 有 意识 地 省 略 了 。 但 
是 读者 可 以 思考 一 下 ， 你 们 的 日 常生 活 中 有 多 少 人 能 够 使 用 到 这 些 选 项 呢 ? 最 简单 的 往往 也 是 最 
方便 的 。 

与 笔者 在 图 15.8 中 所 展示 的 短信 编辑 界面 类 似 ， 用 户 也 可 以 通过 左上 角 的 “返回 ”按钮 取消 
当前 的 操作 。 而 短信 编辑 界面 底部 的 “发 送 ” 按 钮 ， 在 “新 建 联系 人 ”界面 中 则 被 替换 成 了 “ 保 
存 联系 人 ”用户 可 以 通过 它 来 保存 输入 的 联系 人 及 其 号 码 。 


新 建 联系 人 


取 里 是 短信 内容 
联系 人 姓名 ， 


联系 人 电话 号 码 : 


L | 


保存 联系 人 
图 15.8 ”短信 编辑 和 发 送 界面 设计 图 15.9 新 建 联系 人 界面 设计 


读者 在 实际 开发 中 也 常常 会 遇 到 这 样 的 问题 ， 原 本 已 经 设计 好 了 一 套 方案 (并 不 局 限于 界面 
设计 ), 但 是 当 进 度 已 经 进行 了 一 半 时 ,突然 发 现 了 一 个 更 好 的 想法 , 这 时 可 能 就 会 纠结 要 不 要 更 
改 实现 方案 。 

本 书 由 于 有 要 求 必须 使 用 jQuery Mobile， 并 且 笔 者 也 没有 考虑 过 将 这 款 应 用 推 向 到 市 场 ， 因 
此 不 需要 为 此 而 纠结 。 对 于 读者 来 说 遇 到 类 似 的 情况 ， 首 先 要 考虑 时 间 上 是 否 允许 ， 而 在 时 间 允 
许 的 情况 下 则 要 尽 可 能 的 将 两 种 方案 不 同 的 地 方 分 别 实现 再 进行 对 比 。 如 果 时 间 上 仅 够 实现 某 一 
种 方案 ， 那 么 笔者 建议 还 是 坚持 原 有 方案 ， 在 有 余力 的 情况 下 再 去 尝试 新 的 方案 。 
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1 人 .4， 通 h 录 APP 的 界面 实现 


上 一 节 已 经 设计 好 了 通讯 录 APP 的 界面 布局 ， 本 节 要 做 的 就 是 利用 jQuery Mobile 强大 的 UI 
控件 ， 让 这 种 布局 以 一 套 完整 界面 的 形式 展示 出 来 。 
15.4.1 联系 人 列表 


首先 按照 图 15.7 中 所 设计 的 布局 ， 利 用 jQuery Mobile 实现 联系 人 列表 ， 具 体 的 实现 过 程 如 
下 所 示 。 
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> 和 和/ <div data-role="footer" data-position="fixed"> 

28 <div data-role="navbar" data-position="fixed"> 
29 <ul> 

30 <1i><a><h2> 新 建 联系 人 </h2></a></1i> 

31 </ul> 

32 </div> 

| </div> 

34 </div> 

35 </body> 

36 </html> 


运行 后 的 界面 如 图 15.10 所 示 。 下 面 对 本 次 使 用 的 范例 代码 进行 讲解 。 


新 建 联系 人 


图 15.10 实现 后 的 联系 人 列表 界面 


首先 要 明确 一 点 , 由 于 不 需要 开发 者 自己 编写 CSS, 并 且 各 个 元 素 之 间 的 显示 关系 都 被 jQuery 
Mobile 做 出 了 完整 的 定义 ， 开 发 者 不 需要 再 编写 大 量 的 代码 了 。 比 如 ， 当 页 面 中 使 用 顶部 栏 时 ， 
只 要 为 div 元 素 加 入 属性 data-role="header"， 那 么 该 元 素 就 会 显示 在 屏幕 的 最 顶端 ， 而 不 需要 和 额 
外 对 它 的 位 置 进行 定义 。 

在 代码 的 开始 部 分 ， 首 先 要 将 需要 的 jQuery Mobile 的 脚本 和 CSS 样式 文件 引入 到 代码 中 ， 
如 范例 第 8 行 、10 行 和 12 行 所 示 ， 然 后 就 可 以 在 body 标签 中 加 入 page 元 素 ， 如 范例 第 15 行 所 
示 。 
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本 范例 使 用 了 项 部 栏 和 尾部 栏 ， 分 别 为 div 标签 加 入 属性 data-role="header" 和 
data-role="footer" 来 声明 他 们 。 为 了 保证 它们 始终 位 于 屏幕 的 项 部 和 底部 ， 并 且 不 会 对 列表 中 的 内 
容 形成 遮挡 ， 需 要 对 它们 加 入 属性 data-position="fixed"， 如 范例 第 16 行 和 第 27 行 所 示 。 

然后 就 可 以 向 页 面 中 加 入 列表 了 , 在 jQuery Mobile 中 ,如果 希望 向 页 面 中 加 入 某 个 控件 ， 只 
需要 为 相应 的 div 标签 指定 它 的 data-role 属性 即 可 ,如 范例 第 28 行 所 示 。 考 虑 到 用 户 如 果 保存 了 
许多 联系 人 ， 在 查找 时 可 能 会 不 方便 ， 有 时 需要 通过 一 个 搜索 栏 来 帮助 用 户 查 找 相应 的 联系 人 ， 
那么 可 以 通过 为 列表 控件 加 入 属性 data-filter="true"， 来 为 该 列表 加 入 一 个 具有 动态 查找 功能 的 搜 
索 框 。 

接 下 来 就 可 以 按照 范例 第 21~24 行 的 样式 为 列表 中 加 入 内 容 了 ， 此 处 为 了 节约 篇 幅 省 略 了 一 
些 重 复 的 内 容 ， 读 者 可 以 自行 加 入 进去 ， 或 者 参考 范例 的 代码 。 


15.4.2 ”新 建 联系 人 界面 


实现 了 联系 人 列表 之 后 ， 再 来 实现 一 个 新 建 联系 人 的 界面 。 新 建 一 个 html 文件 并 命名 为 
create.html， 按 照 如 下 所 示 输入 代码 。 
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pk <label for="number"> 联 系 人 号 码 :</1label> 

24 <input type="tel" id="number" placeholder=" 请 输入 联系 人 号 码 "/> 
25 </div> 

26 <div data-role="footer" data-position="fixed"> 

2 <div data-role="navbar" data-position="fixed"> 

28 <ul> 

29 <1i><a href="#"><h2> 创 建 联系 人 </h2></a></1i> 
30 </ul> 

31 </div> 

32 </div> 

33 </div> 

34 </body> 

35 </html> 


运行 之 后 界面 如 图 15.11 所 示 。 


图 15.11 新 建 联系 人 界面 


可 以 通过 界面 左上 角 的 “返回 ”按钮 ， 取 消 新 建 联系 人 的 操作 ， 也 可 以 点 击 底部 的 “创建 联 
系 人 ”来 保存 填写 好 的 联系 人 信息 。 

从 代码 中 可 以 看 出 ， 本 例 的 整体 结构 与 15.4.1 小 节 的 代码 非常 类 似 ， 只 是 将 列表 控件 取消 并 
加 入 了 一 个 名 为 content 的 元 素 , 见 范例 第 20~25 行 所 示 , 其 中 包含 了 两 个 标签 和 两 个 文本 编辑 框 。 
代码 中 ，label 声明 了 标签 控件 ， 可 以 通过 设置 它 的 for 属性 ， 使 之 与 和 它 具 有 相同 id 的 编辑 框 对 
应 。 另 外 ， 为 文本 编辑 框 指定 属性 placeholder， 可 以 设置 该 编辑 框 中 的 提示 字符 属性 ， 如 图 15.11 
所 示 ， 可 以 看 到 编辑 框 中 有 “请 输入 联系 人 姓名 ”的 提示 字样 。 
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15.4.3 ”短信 编辑 界面 


本 小 节 继 续 实现 短信 编辑 界面 。 实 际 上 本 小 节 的 任务 非常 简单 ， 只 需要 在 上 一 小 节 代码 的 基 
础 上 稍 作 修改 就 可 以 了 。 新 建 一 个 文件 命名 为 send.html， 先 将 上 一 小 节 中 的 内 容 复 制 过 来 ， 再 按 
照 下 面 的 内 容 对 它 进行 修改 。 


是 不 是 与 前 面 的 内 容 非 常 相似 呢 ? 甚至 是 更 加 简单 明了 。 运 行 之 后 的 界面 如 图 15.12 所 示 ， 
这 个 界面 相对 简单 ， 我 们 仅 解释 一 下 textarea 标签 用 于 声明 输入 大 段 文 字 的 编辑 框 ， 其 他 与 普通 
文本 编辑 框 相同 。 


发 送 给 : XXX 


图 15.12 发 送 短信 界面 


界面 功能 的 实现 


上 一 节 已 经 实现 了 在 15.3 节 中 设计 的 界面 ， 本 节 接 下 来 实现 界面 的 功能 。 在 上 一 节 设计 的 联 

系 人 列表 中 的 联系 人 是 固定 的 ， 而 在 实际 使 用 中 的 联系 人 列表 是 由 PhoneGap 在 用 户 的 手机 中 获 

取 的 。 这 就 导致 了 在 15.4.1 节 中 所 实现 的 界面 是 无 法 拿 来 直接 使 用 的 ， 而 本 节 的 任务 就 是 对 它 做 
些 修 改 ， 使 它 变 成 一 套 真 正 有 用 的 界面 。 


15.5.1 联系 人 数据 的 生成 


在 进行 对 界面 的 修改 之 前 ， 需 要 先 实现 一 段 简 单 的 脚本 ， 用 于 生成 一 些 简单 的 联系 人 数据 ， 
这 样 一 来 不 但 测试 更 加 方便 ， 而 且 只 需要 在 最 后 一 步 时 加 入 使 用 PhoneGap 获取 的 联系 人 信息 ， 
就 可 以 直接 使 用 了 。 

还 记得 在 上 一 章 中 实现 的 新 闻 APP 嘛 ? 可 以 说 整个 过 程 都 是 在 PC 端 实现 的 ， 只 有 最 后 才 需 
要 在 虚拟 机 或 者 是 真 机 上 进行 几 次 测试 。 笔 者 非常 享受 这 样 的 开发 过 程 ， 因 为 这 比 完全 在 虚拟 机 
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中 测试 要 有 效率 得 多 。 本 章 的 项 目 虽 然 要 使 用 到 一 些 API 而 不 得 不 在 开发 中 使 用 虚拟 机 测试 ， 但 
是 如 果 能 够 将 不 需要 API 的 部 分 与 需要 API 的 部 分 尽量 地 分 离 ， 使 得 大 多 数 工 作 能 够 在 PC 端 进 
行 测试 ， 这 无 疑 也 有 助 于 我 们 提高 开发 效率 。 

由 于 JavaScript 并 不 是 一 种 真正 面向 对 象 的 语言 ， 而 是 一 种 基于 面向 对 象 思想 的 脚本 语言 ， 
因此 是 没有 办 法 去 实现 一 个 专门 的 类 用 于 保存 联系 人 信息 的 ， 但 是 我 们 可 以 模拟 一 个 这 样 的 类 ， 
并 按照 一 定 的 语法 去 使 用 它 就 可 以 解决 问题 了 。 


在 本 书 前 面 的 内 容 中 也 常常 提 到 PhoneGap 封装 了 某 个 类 〈 比 如 Contact 类 ) ,但 是 实际 上 这 
些 类 也 是 根本 不 存在 的 ,仅仅 由 于 JavaScript 的 特性 却 可 以 让 用 户 像 真正 存在 这 些 类 一 样 对 对 
象 进行 操作 。 


在 本 项 目 中 ,我 们 需要 一 个 类 Person， 在 Person 类 中 封装 了 联系 人 的 姓名 、 号 码 等 信息 ， 在 
具体 使 用 时 可 以 按照 如 下 所 示 的 方法 来 实现 : 


下 面 开 始 利 用 这 段 代码 让 联系 人 信息 “动态 地 ”加 载 到 jQuery Mobile 所 实现 的 联系 人 列表 
中 去 ， 具 体 实现 方法 如 下 所 示 。 
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运行 之 后 的 界面 如 图 15.13 所 示 。 当 用 户 点 击 屏 幕 上 的 列表 项 时 ， 会 以 对 话 框 的 形式 弹出 当 
前 选中 的 联系 人 的 信息 ， 如 图 15.14 和 图 15.15 所 示 。 

本 范例 虽然 看 起 来 简单 ， 没 有 涉及 什么 新 的 内 容 ， 但 却 较 难 掌握 ， 尤 其 是 在 jQuery Mobile 
中 动态 地 加 载 页 面 控件 ， 一 直 令 许多 新 手感 到 困扰 。 下 面 我 们 对 范例 中 第 14~30 行 的 代码 进行 详 
细 讲 解 。 

首先 在 JavaScript 中 为 对 象 使 用 数组 的 方法 前 面 已 经 提 到 过 在 JavaScript 中 实际 是 不 存在 类 
的 ， 但 是 在 JavaScript 中 却 可 以 将 任何 一 个 元 素 都 当 作 对 和 象 来 使 用 。 因 此 ， 在 需要 为 对 象 定义 数 
组 时 ， 只 需要 声明 一 个 数组 ， 然 后 像 正常 使 用 对 象 一 样 去 使 用 数组 中 的 每 一 个 元 素 就 可 以 了 ， 如 
范例 第 19~21 行 所 示 。 但 是 要 注意 在 第 18 行 中 还 有 一 名 代码: 


如 果 没 有 它 的 存在 ， 是 不 能 将 元 素 people[j] 当 作对 象 来 对 每 个 属性 进行 赋值 的 。 
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新 建 联系 人 


图 15.13 动态 加 载 出 的 联系 人 列表 


你 想 给 第 3 个 人 打 电 话 , 他 叫 : 联系 人 2 
他 9 电话 22o 


你 想 给 第 5 个 人 发 短信 , 他 0H : 联系 人 乞 
号 码 是 :0411 人 站 话 Ol144e 


号 码 是 :041144 
阻止 此 页 面 创建 更 多 对 话 杠 


确定 
确定 


图 15.14 点 击 联系 人 名 称 时 弹出 的 对 话 杠 图 15.15 点 击 列表 项 右 侧 按钮 弹出 的 对 话 框 


生成 了 联系 人 信息 之 后 ， 接 着 要 做 的 就 是 如 何 将 这 些 信息 在 屏幕 上 显示 出 来 ， 请 看 15.4.1 节 
中 的 第 21~24 行 代码 内 容 : 
<1i> 
<a> 联 系 人 </a> 
<a></a> 
</1i> 


它 的 作用 是 声明 列表 中 的 一 个 列表 项 ， 也 是 列表 中 实际 被 显示 出 来 的 部 分 ， 在 该 范例 中 要 做 
的 实际 上 也 就 是 ， 将 这 部 分 的 内 容 使 用 脚本 加 载 到 页 面 当 中 去 。 此 外 ， 为 了 对 用 户 的 操作 加 入 响 
应 ， 比 如 当 用 户 点 击 列表 项 时 进行 拨打 电话 的 操作 ， 还 要 对 这 段 代码 做 一 点 小 小 的 修改 ， 内 容 如 
下 : 

sl 

<a onClick=”call (1) “> 联系 人 </a> 
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<a onClick=“message (1)”></a> 


</1i> 


其 中 call 和 message 分 别 是 对 用 户 操 作 进 行 响应 的 自 定义 函数 ， 见 范例 中 第 36~50 行 所 示 。 
而 为 了 让 系统 能 够 知道 用 户 到 底 选 择 了 哪个 列表 ， 则 需要 为 这 两 个 函数 加 入 一 个 参数 ， 即 上 面 代 
码 中 的 1。 在 实际 使 用 时 ， 该 数字 与 相应 联系 人 的 id 属性 对 应 ， 由 系统 进行 分 配 。 

范例 的 第 25~31 行 就 是 在 JavaScript 中 生成 这 段 代 码 时 所 使 用 的 字符 拼接 方法 ， 然 后 可 以 使 
用 jQuery 提供 的 append() 方 法 ， 将 它们 加 入 到 列表 中 去 〈 如 范例 第 31 行 所 示 )。 做 到 这 一 步 ， 看 
到 的 结果 就 一 定 会 是 如 图 15.16 所 示 的 界面 。 


新 建 联 系 人 


图 15.16 新 加 入 的 元 素 并 没有 被 泻 染 成 该 有 的 样式 


这 是 由 于 jQuery Mobile 实际 上 就 是 一 组 CSS 样式 ， 开 发 者 使 用 它 时 不 需要 知道 这 些 样式 具 
体 是 哪 一 个 , 而 是 由 jQuery Mobile 的 脚本 在 页 面 被 加 载 时 动态 进行 分 配 。 当 页 面 被 加 载 完 毕 之 后 ， 
如 果 页 面 上 的 内 容 发 生 了 改变 , jQuery Mobile 是 不 知道 的 , 因此 也 不 会 对 新 加 入 的 元 素 进行 泻 染 。 

那 该 怎么 办 呢 ? 一 个 比较 笨 的 办 法 是 直接 到 jQuery Mobile 的 CSS 文件 中 找到 与 列表 项 对 应 
的 样式 ， 然 后 利用 JavaScript 人 工 对 它 进行 加 载 。 聪 明 的 开发 者 会 去 查阅 文档 ， 或 者 在 阅读 本 章 
的 内 容 之 后 ， 使 用 本 范例 第 32 行 所 使 用 的 方法 对 被 改变 的 元 素 样式 进行 刷新 。 


总 由 于 目前 使 用 jQuery Mobile 开发 的 应 用 大 多 是 基于 Web 的 ， 可 以 利用 后 台 的 脚本 来 实现 刷 
新 , 因此 可 能 用 不 到 这 种 对 空间 样式 进行 刷新 的 功能 。 但 是 当 利 用 jQuery Mobile 和 PhoneGap 

| 进行 本 地 应 用 开发 时 ,由 于 开发 者 可 以 依靠 的 只 剩 下 JavaScript 了 , 这 种 刷新 的 技术 就 变 得 非 
常 重要 了 。 
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15.5.2 ”页 面 的 整合 


上 一 小 节 已 经 实现 了 对 通讯 录 联系 人 的 动态 加 载 ， 本 小 节 将 整合 前 面 的 代码 ， 把 它们 合并 到 
同一 个 页 面 中 去 。 实 现 的 方法 如 下 所 示 。 
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上 面 代码 第 92~107 行 是 联系 人 列表 界面 ;第 109~125 行 是 本 项 目 在 发 送 短信 时 的 短信 编辑 
界面 ; 最 后 第 127~145 行 用 于 作为 新 建 联系 人 界面 来 显示 。 在 运行 该 页 面 后 的 界面 与 图 15.13 没 
有 什么 区 别 ， 只 显示 了 联系 人 列表 界面 。 那 么 页 面 中 新 加 入 的 内 容 都 到 哪里 去 了 呢 ? 

这 是 由 于 jQuery Mobile 对 页 面 进行 泻 染 时 , 会 默认 只 显示 页 面 中 id 为 home 的 那个 页 面 , 但 
是 在 本 范例 的 第 92 行 、109 行 和 127 行 可 以 看 到 ， 此 次 改动 为 每 一 个 page 控件 加 入 了 一 个 id， 
却 并 没有 找到 id 值 为 home 的 页 面 。 此 时 ，jQuery Mobile 会 默认 只 演 染 第 一 个 页 面 。 

当 需 要 时 可 以 通过 链接 的 方式 在 各 个 页 面 之 间 进 行 切 换 ， 如 第 85 行 和 第 103 行 所 示 。 

除 此 之 外 ， 还 可 以 看 到 在 此 次 页 面 合并 中 ， 笔 者 新 加 入 了 一 些 页 面 的 响应 ， 如 第 141 行 的 
onClick 属性 等 ， 用 于 为 下 一 步 加 入 API 留 下 接口 。 另 外 还 在 页 面 中 对 脚本 进行 了 添加 和 修改 。 
目前 所 实现 的 界面 功能 如 下 : 


@ ”实现 了 联系 人 列表 的 动态 加 载 ， 如 图 15.13 所 示 。 本 例 将 get_contacts() 方 法 进行 了 修改 ， 
仅 保 留 了 生成 联系 人 数据 的 部 分 ， 而 将 原本 显示 联系 人 的 部 分 封装 到 函数 show_List 中 。 

@ 实现 了 由 联系 人 列表 到 短信 编辑 界面 的 切换 ， 并 且 能 够 对 短信 编辑 界面 的 信息 进行 处 
理 ， 如 图 15.17 和 图 15.18 所 示 。 


这 是 一 条 测试 短信 
口 阻止 此 页 面 创建 更 多 对 话 框 


你 想 给 第 7 个 人 发 短信 , 他 叫 : 联系 人 6 
他 8 电话 号 码 是 :041166。 
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15.17 “显示 收 短信 联系 人 的 信息 图 15.18 能够 获取 所 编辑 短信 的 信息 


第 48~52 行 处 的 message 函数 获取 了 被 用 户 选中 的 联系 人 的 id, 并 将 其 保存 到 变量 contact Id 
中 ， 然 后 修改 短信 编辑 页 面 中 顶部 栏 的 内 容 ， 并 切换 至 该 界面 。 

当 用 户 编辑 完 短信 后 ， 可 以 点 击 屏幕 底部 的 发 送 按钮 ， 此 时 会 执行 在 第 54~66 行 处 的 函数 
send。 通 过 阅读 此 处 代码 可 以 看 出 ， 该 函数 正 是 通过 获取 contact Id 的 值 ， 来 判断 要 将 短信 发 送 
给 哪个 联系 人 的 。 

此 外 ， 还 实现 了 新 建 联系 人 ， 以 及 在 新 建 联系 人 之 后 返回 联系 人 列表 ， 并 将 新 建 的 联系 人 显 
示 在 屏幕 上 的 功能 ， 如 图 15.19 和 图 15.20 所 示 。 此 时 ， 如 果 点 击 联系 人 列表 项 ， 则 能 够 获得 该 联 
系 人 的 信息 ， 如 图 15.21 所 示 。 该 部 分 功能 在 范例 中 的 第 68~87 行 实现 。 
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联系 人 号 


123456789 


创建 联系 人 


图 15.19 在 新 建 联系 人 界面 新 建 联系 人 


联系 人 列表 


你 想 给 第 11 个 人 打 电 话 , 他 叫 : 猫 爷 ,他 的 
电话 号 码 是 :123456799。 


新 建 联系 人 


图 15.20 可 以 看 到 新 创建 的 联系 人 被 显示 出 来 ”图 15.21 点 击 列表 项 则 会 显示 新 创建 的 联系 人 信息 


通讯 录 APP 最 终 功 能 的 实现 


通过 上 一 节 中 的 努力 ， 可 以 说 本 项 目 已 经 实现 得 差不多 了 ， 现 在 要 做 的 就 是 将 所 需要 的 API 
加 入 到 该 代码 中 来 ， 然 后 在 虚拟 机 上 测试 一 下 而 已 。 请 参照 下 面相 应 的 JavaScript 代码 进行 修改 。 
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第 15 章 HTML 5+PhoneGap 实现 通讯 录 APP 


然后 就 可 以 在 虚拟 机 中 进行 测试 了 注意 一 定 要 将 之 前 写 好 的 插件 中 的 脚本 引入 到 页 面 中 来 


15.7 4 千 


本 章 不 但 补 齐 了 前 面 章节 没有 介绍 的 PhoneGap 插件 实现 方法 ， 还 在 项 目 中 使 用 jQuery 
Mobile， 因 此 本 章 对 于 初学 者 来 说 是 很 有 学 习 价值 的 。 读 者 在 学 习 完 本 章 内 容 后 ， 还 要 深入 思考 
一 些 更 加 复杂 的 问题 ， 比 如 怎么 解决 PhoneGap 获取 联系 人 效率 的 问题 ， 以 及 如 何 将 本 地 存储 应 
用 到 项 目 中 。 至 此 ， 本 书 的 实战 项 目 就 全 部 介绍 完毕 了 。 
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本 书 的 开发 因为 着 重 于 Web APP 的 开发 , 所 以 没有 搭配 专门 的 手机 应 用 开发 环境 , 但 如 果 企 
业 要 求 做 混合 开发 ， 除 了 一 些 Web APP 外 ， 还 需要 Native APP， 那 就 需要 措 建 专门 的 安 卓 或 iOS 
开发 环境 了 。 目 前 安 卓 开发 人 数 众多 ， 下 面 详 细 介绍 下 安 卓 开 发 环境 的 措 建 。 


在 搭建 安 卓 开发 环境 之 前 , 首先 要 做 的 是 安装 和 配置 JDK (Java Development Kit), 它 是 SUN 
AN 司 为 Java 开发 者 提供 的 编译 工具 ， 可 以 在 百度 搜索 JDK 之 后 到 Oracle 官网 下 载 ， 如 图 和 .1 所 


六 


Al 


8 
Bai 合 下 度 新 闻 网 页 贴吧 知道 音乐 图 片 视 旺 地 图 广 座 更 多 > 
[uoxk [a 


Java SE - Downloads | Oracle Tecl Network | Oracle 

Java SE downloads including: Java Development Kit UDK) Server Java Runtime Environment 
(Sever JRE) and Java Runtime Environment (JRE)} 

www oracle.com/hechnetworkjava/java 2014-01-09 -百度 快照 


fl.1 在 百度 中 搜索 JDK 


(1) 单 击 网 页 中 的 “JDK DOWNLOAD” 链 接 ， 就 可 以 进入 JDK 的 下 载 页 面 ， 如 图 人 2 所 
示 。 在 下 载 页 面 中 选中 “Accept License Agreement” 同 意 服务 条 款 ， 再 在 下 方 的 条 款 中 选中 要 下 
载 的 JDK 版 本 ， 如 图 所.3 所 示 。 直 接 单 击 对 应 的 版 本 即 可 完成 下 载 。 


本 书 默认 使 用 Windows 操作 系统 ， 可 以 根据 需要 选择 32 位 或 者 64 位 。 


EE ThirdPary| ne 下 载 村 而 eee 


图 fl.2 选择 下 载 JDK 


Java SE Development Kit 7u51 


附 录 安 卓 开发 环境 的 搭建 


You must accopt the Oracle Bnary Cedo Licenss Agreoment for Javs SE to download ihis 
sofware. 


| 


Promuct Fle 


Downioad 


Dru ARUVSNT Hara Fioat xB 
mu snroalE] 
Linu eo 

Lnur 6 

Lr id 

inure 

Mac OS X64 

Solaris x86 (SR4 package) 
Solaris ra6 


Satis SPARC 
Solaris SPARG G4 DOSURY packago) 
Solaris SPARC 64 tit 


Saar Ra 1 


Nuc arrr- pha tar gz 
MDrarT- WD Star gr 


Wincows 265 
Windows 04 


人 .3 选择 对 应 操作 系统 版 本 的 JDK 


(2) 下 载 完成 后 ， 双 击 运 行 安装 程序 ， 得 到 如 图 所.4 所 示 的 界面 ， 单 击 “ 下 一 步 ”按钮 继 


续 安装 。 


欢迎 使 用 Java SE Development Kit 7 Update 51 安装 向 导 


Hb 生怕 引导 让 守成 av SEDevsiopnentGt 7Update 51 的 安 法 过 程 。 


Java Miedon Control 分 析 初 诊 疡 工具 套件 现在 作为 ok 的 一 部 分 提 共 。 


其 Java SE Development Kit7Update 51(54-bi0) -设置 一 


ESWC mn 


图 外.4 欢迎 界面 


(3) 继续 单 击 “ 下 一 步 ”按钮 ，JDK 开始 安装 。 稍 等 几 分 钟 后 ，JDK 安装 完毕 ， 得 到 如 图 
人 .5 所 示 的 界面 。 接 下 来 可 以 单 击 “ 后 续 步 又 ”按钮 查看 JDK 配置 环境 变量 的 方法 。 
ET 


Java SE Development Kt 7 Update 51 (64-bit) 已 成 功 安装 


六 三 AI 文档 , 开发 人 员 指南 , 发 行 说 明 以 及 更 参 可 以 帮助 您 


开始 使 用 20K 的 和 


| 


ET 


全 .5 JDK 安装 完毕 
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和 实际 上 ， 随 着 新 版 本 的 不 断 出 现 ， 在 新 版 本 的 JDK 安装 完成 之 后 ， 就 已 经 可 以 在 CMD 中 使 

| 用 “java” 命 令 来 调用 。 但 是 如 果 在 CMD 中 执行 命令 “javac” 却 会 显示 出 提示 : “javac” 不 

| 是 内 部 或 外 部 命令 ,也 不 是 可 运行 的 程序 或 批 处 理 文件 ,如 果 使 用 3.0.0 版 本 之 后 的 PhoneGap， 
手动 配置 JDK 的 环境 变量 还 是 非常 有 必要 的 。 


(4) 右 击 “计算 机 ”( 在 XP 系统 中 为 “我 的 电脑 ”)， 在 快捷 菜单 中 选择 “属性 ”命令 ， 打 
开 如 图 身 .6 所 示 界面 。 选 中 左 侧 的 “高 级 系统 设置 ”选项 ， 就 弹出 如 图 外 .7 所 示 的 对 话 框 。 


查看 有 关 计 算 机 的 基本 信息 
Windows 版 本 
Windows 7 旗 觅 版 
版 权 所 有 日 2009 Microsoft Corporation。 保 时 所 有 权利 


[ak 


图 f1.6 选择 “高 级 系统 设置 ” 
未 省 站 “将 


计算 机 名 [硬件 “| 高 级 。 系统 保护 | 运程 
要 进行 大 多 郝 更 改 ， 您 必须 作为 管理 员 登 录 。 
性 能 
视觉 效果 ， 处 理 器 计划 ， 内 存 使 用 ， 以 及 虚拟 内 存 
设置 5).. 
用 户 配置 文件 
与 您 登录 有 关 的 虚 面 设置 
设置 E)..， 
启 sh 地 障 恢复 
系统 启动 、 系 统 失败 和 调 直 信息 || 
设置 中 
环境 朗 量 0) 由 


ED Eg [机 
图 人 17 单 击 “环境 变量 ”按钮 


(5) 在 某 些 系统 中 还 要 选中 “高 级 ”选项 卡 ， 才 能 得 到 图 人 .7 所 示 的 界面 ， 进 入 之 后 单 击 
底部 的 “环境 变量 ”按钮 ， 就 可 以 对 环境 变量 进行 设置 ， 如 图 和 .8 所 示 。 
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WUSERPROFTLEX ATenp 
XUSERPRDFILEX\AppData\Local\Tenp 


曾 建 o.… | [编辑 .| [ 时 放 0D) 


值 

Destination=file 国 
AYA_HONEXNLIb; XJAYA_HONEXNL. 
C:\Windows\systen32\cnd. exe 


新 建 人 D.-， | [编辑 中 ] [国人 | 


[证 ][ MWA 


图 人 .8 在 此 处 对 环境 变量 进行 设置 


(6) 新 建 一 个 系统 变量 命名 为 JAVA_HOME ， 其 中 的 内 容 为 : Ci\Program 
Filesyavayjdk1.7.0 .51。 再 新 建 环境 变量 classpath， 内 容 为 ，.;%java_home%\lib。 之 后 还 要 在 环境 
变量 中 找到 path 变量 ， 在 其 中 加 入 内 容 : %java_home%\bin。 


注意 ， 是 在 原 有 的 内 容 之 后 加 入 而 不 是 替换 ， 如 原 内 容 为 : 


那么 修改 后 的 内 容 应 为 : 


要 在 原 内 容 的 最 后 先 加 入 一 个 分 号 ， 将 内 容 隔 开 。 | 


在 配置 环境 变量 时 要 注意 ， 环 境 变量 实际 上 是 JDK 安装 的 真实 路 径 ， 比 如 说 在 本 例 中 JDK 
就 被 安装 在 了 路 径 C:\Program FilesJavaijdk1.7.0_51 下 ， 如 图 fl.9 所 示 。 


f1.9 JDK 的 安装 路 径 
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(7) 配置 完成 后 ,在 CMD 中 输入 javac-version， 显 示 所 安装 JDK 的 版 本 号 即 可 证 明 环 境 变 


量 配 置 成 功 ， 如 图 所 .10 所 示 。 


图 人 1.10 显示 JDK 版 本 号 


(8) 在 完成 了 JDK 的 配置 之 后 ， 就 可 以 搭建 安 卓 的 开发 环境 了 。 本 来 这 是 非常 复杂 的 一 项 
任务 ， 但 是 现在 安 卓 官 方 已 经 为 开发 者 提供 了 打包 好 的 集成 开发 环境 ， 只 要 去 官网 下 载 后 解压 即 


可 完成 。 


在 浏览 器 中 输入 网 址 “http://developer.android.com/” 可 以 到 安 卓 的 开发 者 网 站 上 下 载 最 新 版 
本 的 SDK 〈Software Development Kit， 即 软件 开发 工具 包 )， 如 图 和 .11 所 示 。 


大 Developers Design 


Develop Distribute 


Design for Android KitKat 


Android KitKat br 
updated styles pattemr 
use in your apps, 
‘We've updated the Android Design > 
guidelines and added new pages on 

branding fullscreen and more. 


‘ert Lceree 


图 fl.11 在 安 卓 开发 者 主页 获取 SDK 


(9) 单 击 屏幕 下 方 的 “Getth 
The SDK” 按 钮 进入 如 图 人 1.12 


e SDK ”按钮 , 进入 如 图 和 .12 所 示 的 页 面 , 单 击 右 侧 的 “Download 
所 示 的 页 面 ， 选 择 要 下 载 的 SDK 版 本 。 


芒 安 卓 SDK 又 叫做 ADT， 是 Android Developer Tools ( 安 卓 开发 者 工具 ) 的 缩写 。 | 


站 


(10) 选中 “I have read and agree with the above terms and conditions ”， 根 据 需 要 选择 是 使 用 


32 位 还 是 64 位 的 开发 环境 ， 单 如 
下 载 了 《〈 如 图 所 .13 所 示 )。 
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和“Download the SDK ADT Bundle for Windows ”按钮 就 可 以 开始 


ucvcrubcl tuuts mcecssaly tu uunu teat, au ucuuy 


Setting Up theADT apps for Android. 

Bundle 
Ifyou're a new Android developer werecommend you 

eben ~ downloadthe ADT Bundleto quickly start developing 
apps. lt includes the essential Android SDK 

Android studio 。 ~ components and a version of the Eclipse IDE with 
built-in ADT (Android Developer Tools) to streamline 

Exploring the SDK your Android app development 

Download the NDK 


With a single download. the ADT Bundle includes 


Workflow ~ everything youneed to begin developing apps: Download the SDK 
Support Library -=~ 。 Eclipse + ADT plugin | ADT Bundle for Windows 


。 Android SDK Tools 


weve 单 击 几 娩 选择 帮 应 版 本 的 SDK 


Revisions v 。 The latest Android platiorm 
。 The latest Android system image for the emulator 


| Android Studio Early Access Preview 


图 fl.12 进入 SDK 下 载 页 面 


ADK 


1have read and agree with the above terms and conditions 


@ 32-bit © 64-bit 


Download the SDK ADT Bundle for Windows 


们 .13 ”选择 相应 的 版 本 即 可 进行 下 载 


民 却 此 处 只 提供 了 Windows 环境 下 的 SDK， 如 果 使 用 Linux 需要 下 载 Eclipse 进行 配置 。 | 


(11) 下 载 之 后 将 它 解压 并 复制 到 D 盘 根 目 录 下 〈 也 可 以 是 其 他 位 置 ， 但 要 保证 其 中 不 要 有 
中 文 路 径 )。 打 开 Di\adt-bundle-windows-x86_64-20131030\eclipse 路 径 下 的 eclipse 即 可 进入 安 卓 开 
发 环境 。 

(12) 在 菜单 中 选择 FilelINew|Android Application Project， 弹 出 如 图 人 .14 所 示 的 窗口 ， 按 照 
图 中 的 内 容 进 行 填写 并 单 击 Next 按钮 。 


| @ New Android Application i -i 
New Android Application 
A The application name for most apps begins with an uppercase letter 


Application Name:! phonegap test 
Project Name:0 phonegaptest 


Package Name:t com.example.phonegap.test 


| Minimum Reauired SDK:0 [API 19: Android 44 (XitKat) | 
Target SDK:6 [APL 19: Android 4.4 xitkag) 9| 

Compile With:o [API 19: Android 4.4 [KitKat) | 

Theme:0 [Holo Uight with Dark Action Bar 了 


人 1.14 ”新建 一 个 安 卓 项 目 
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(13) 之 后 一 直 单 击 Next 按钮 ， 最 终 来 到 如 图 所.15 所 示 的 界面 ， 单 击 Finish 按钮 完成 新 项 
目的 创建 。 


加 New Android 


Blank Activity 
Creates a new blank activity, with an action bar and optional navigational elements such as tabs or 


horizontal swipe. 


Activity Name® MainActivity 
Layout Namee activity main 
用 eewon Typee|None 加 


DThe name of the activity class to create 


Re Er Er Eaaa Eeea 
图 fl.15 ”完成 新 项 目的 创建 


(14) 由 于 安 卓 已 经 为 开发 者 准备 了 简单 的 例子 ， 因 此 当 新 建 项 目 之 后 ， 实 际 上 已 经 是 一 个 
简单 且 完整 的 例子 了 ， 可 以 直接 编译 运行 。 但 是 为 了 运行 它 ， 还 需要 新 建 一 个 虚拟 机 才 行 。 在 菜 
单 中 选中 Window|Android Virtual Device Manager， 弹 出 如 图 fl.16 所 示 的 窗口 。 


| B ndroid Va Sie [| 


Android Virual Devices [Device einiions 


List of existing Android Virual Devices located at CNUsersWdminiswatorvandroidvavd 


AVD Name Target Name Platom Apllevel CPU/ABL 
. Ne AVD availabie 


单 击 此 处 新 建 一 个 虚拟 机 


MY A vald Android Virtual Device. 3 A repairable Android Virual Device. 由 
其 AnAndrcid viual Device that faied to load. Click Details’ io see the error. 


fl.16 新建 一 个 虚拟 机 


(15) 单 击 New 按钮 ， 新 建 一 个 虚拟 机 ， 其 中 “AVD Name” 一 栏 填写 虚拟 机 的 名 称 ， 可 以 
随意 填写 ， 由 于 笔者 对 HTC 发 布 的 Nexus One 有 着 极 深 的 热爱 ， 因 此 常常 会 以 此 来 作为 名 称 。 
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“Device” 一 栏 用 来 选择 合适 的 设备 分 辩 率 以 及 屏幕 尺寸 。“Target” 一 栏 选择 所 使 用 安 卓 系统 的 
版 本 ， 一 般 来 说 SDK 中 会 自 带 当前 最 新 版 本 的 系统 ， 比 如 本 例 中 使 用 的 是 4.4 版 本 。 如 果 想 使 用 
老 版 本 则 需要 自己 去 下 载 。 此 外 还 可 以 在 下 方 的 其 他 选项 中 去 设置 虚拟 机 的 内 存 以 及 SD 卡 等 内 
容 。 单 击 OK 按钮 完成 创建 ， 如 图 入 .17 所 示 。 

(Ooeateren mdroidvinua DoD 民品 | 
Ame res  ” 庶 折 机 和 名称 


Device: 40° WWGA (480 x B00: hdpi) 3 

| Target: Android 44 - API Level 19 - 
CPUABE ARM (ermeabi-v7a) 
Keyboard: Hardware keyboard present 
Skin @ Disploy 。 sin with hardware controls 
Frent Camera: 。 [None 机 
Back Camera: [None a | 
Memory Options: | RAM: 512 VM Heap: 32 
Internal storage: 200 
SD card: 

a | 
Fle: Browse, 


Emulation Options: Fjsnapshot 。 器 useHost pu 


Override the existin g AVD with the same name 


Eeea | 
人 .17 设置 新 建 虚拟 机 的 各 项 属性 


(16) 接 下 来 就 可 以 选中 刚刚 新 建 好 的 安 卓 项 目 并 右 击 , 在 弹出 的 菜单 中 选择 Run AS|Android 
Application 进行 测试 ， 如 图 入 .18 所 示 。 


读者 耐心 一 些 。 另 外 在 第 一 次 测试 时 为 了 能 够 减少 等 待 时 间 ， 建 议 读者 可 以 将 虚拟 机 的 屏幕 


医改 在 第 一 次 打开 虚拟 机 时 ， 由 于 系统 需要 进行 安装 和 加 载 ， 因 此 等 待 的 时 间 会 比较 长 ， 请 各 位 
[ 分 辩 率 尽量 降低 一 点 。 


至 此 ， 安 卓 的 开发 环境 就 配置 成 功 了 。 
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图 5554nexus 


全 phonegap_test 


Hello world! 


图 fl.18 第 一 个 安 卓 程序 
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